@alfalab/core-components-tabs 7.6.0 → 7.6.2

package/{Component-abcc39aa.d.ts → Component-2aef4eba.d.ts}

@@ -5,7 +5,7 @@ import { ButtonProps } from "./index-ebda875c";
 import { BaseSelectProps } from "./index-3e68f8db";
 type PickerButtonSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
 type PickerButtonVariant = 'default' | 'compact';
-type PickerButtonDesktopProps = Omit<BaseSelectProps, 'Field' | 'placeholder' | 'Arrow' | 'autocomplete' | 'size' | 'onFocus' | 'selected' | 'closeOnSelect' | 'multiple' | 'fieldProps' | 'hint' | 'allowUnselect' | 'options'> & Pick<ButtonProps, 'view' | 'loading' | 'leftAddons' | 'rightAddons'> & {
+type PickerButtonDesktopProps = Omit<BaseSelectProps, 'placeholder' | 'Arrow' | 'autocomplete' | 'size' | 'onFocus' | 'selected' | 'closeOnSelect' | 'multiple' | 'hint' | 'allowUnselect' | 'options'> & Pick<ButtonProps, 'view' | 'loading' | 'leftAddons' | 'rightAddons'> & {
     options: Array<BaseSelectProps['options'][0] & {
         /**
          * Иконка, отображающаяся слева от текстового представления пункта
@@ -26,7 +26,7 @@ type PickerButtonDesktopProps = Omit<BaseSelectProps, 'Field' | 'placeholder' |
      */
     showArrow?: boolean;
 };
-declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "placeholder" | "onFocus" | "size" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "rightAddons" | "leftAddons" | "view" | "loading"> & {
+declare const PickerButtonDesktop: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "placeholder" | "onFocus" | "size" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow"> & Pick<ButtonProps, "rightAddons" | "leftAddons" | "view" | "loading"> & {
     options: Array<BaseSelectProps['options'][0] & {
         /**
          * Иконка, отображающаяся слева от текстового представления пункта

package/Component-3885b0d7.d.ts

@@ -1,6 +1,71 @@
 /// <reference types="react" />
 import React from 'react';
-import { NavigationBarProps } from "./types-ebda875c";
-declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
-export * from "./Component-ebda875c";
-export { NavigationBar };
+import { ReactNode } from "react";
+import { BottomSheetProps } from "./index-f12ee135";
+import { BaseSelectProps } from "./typings-5e1b8383";
+type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Отображать в BottomSheet
+     */
+    isBottomSheet?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
+};
+declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean | undefined;
+    /**
+     * Отображать в BottomSheet
+     */
+    isBottomSheet?: boolean | undefined;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps> | undefined;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<import("./typings-bdb4c6b9").ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<import("./Component-5e1b8383").HeaderProps> | undefined;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<import("./Component.mobile-b2c0420d").FooterProps> | undefined;
+} & React.RefAttributes<unknown>>;
+export * from "./Component.mobile-b2c0420d";
+export { SelectMobileProps, BaseSelectMobile };

package/Component-ebda875c.d.ts

@@ -1,142 +1,12 @@
-/// <reference types="react-transition-group" />
 /// <reference types="react" />
+/// <reference types="react-transition-group" />
 import React from 'react';
-import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
-import { TransitionProps } from 'react-transition-group/Transition';
-import { BackdropProps, PortalProps } from "./index-ebda875c";
-type BaseModalProps = {
-    /**
-     * Контент
-     */
-    children?: ReactNode;
-    /**
-     * Компонент бэкдропа
-     */
-    Backdrop?: FC<BackdropProps>;
-    /**
-     * Свойства для Бэкдропа
-     */
-    backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
-    /**
-     * Нода, компонент или функция возвращающая их
-     *
-     * Контейнер к которому будут добавляться порталы
-     */
-    container?: PortalProps['getPortalContainer'];
-    /**
-     * Отключает автоматический перевод фокуса на модалку при открытии
-     * @default false
-     */
-    disableAutoFocus?: boolean;
-    /**
-     * Отключает ловушку фокуса
-     * @default false
-     */
-    disableFocusLock?: boolean;
-    /**
-     * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
-     * @default false
-     */
-    disableRestoreFocus?: boolean;
-    /**
-     * Отключает вызов `callback` при нажатии Escape
-     * @default false
-     */
-    disableEscapeKeyDown?: boolean;
-    /**
-     * Отключает вызов `callback` при клике на бэкдроп
-     * @default false
-     */
-    disableBackdropClick?: boolean;
-    /**
-     * Отключает блокировку скролла при открытии модального окна
-     * @default false
-     */
-    disableBlockingScroll?: boolean;
-    /**
-     * Содержимое модалки всегда в DOM
-     * @default false
-     */
-    keepMounted?: boolean;
-    /**
-     * Управление видимостью модалки
-     */
-    open: boolean;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс
-     */
-    contentClassName?: string;
-    /**
-     * Дополнительный класс для обертки (Modal)
-     */
-    wrapperClassName?: string;
-    /**
-     * Обработчик скролла контента
-     */
-    scrollHandler?: 'wrapper' | 'content' | MutableRefObject<HTMLDivElement | null>;
-    /**
-     * Пропсы для анимации (CSSTransition)
-     */
-    transitionProps?: Partial<TransitionProps>;
-    /**
-     * Рендерить ли в контейнер через портал.
-     * @default true
-     */
-    usePortal?: boolean;
-    /**
-     * Обработчик события нажатия на бэкдроп
-     */
-    onBackdropClick?: (event: MouseEvent) => void;
-    /**
-     * Обработчик события нажатия на Escape
-     *
-     * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
-     */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Обработчик закрытия
-     */
-    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick') => void;
-    /**
-     * Обработчик события onEntered компонента Transition
-     */
-    onMount?: () => void;
-    /**
-     * Обработчик события onExited компонента Transition
-     */
-    onUnmount?: () => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-    /**
-     * z-index компонента
-     */
-    zIndex?: number;
-    /**
-     * Реф, который должен быть установлен компонентной области
-     */
-    componentRef?: MutableRefObject<HTMLDivElement | null>;
-};
-type BaseModalContext = {
-    parentRef: React.RefObject<HTMLDivElement>;
-    componentRef: React.RefObject<HTMLDivElement>;
-    hasFooter?: boolean;
-    hasHeader?: boolean;
-    hasScroll?: boolean;
-    headerHighlighted?: boolean;
-    footerHighlighted?: boolean;
-    headerOffset?: number;
-    setHeaderOffset: (offset: number) => void;
-    contentRef: Ref<HTMLElement>;
-    setHasHeader: (exists: boolean) => void;
-    setHasFooter: (exists: boolean) => void;
-    onClose: Required<BaseModalProps>['onClose'];
+import { CheckboxProps } from "./index-ebda875c";
+type HeaderProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: CheckboxProps['onChange'];
+    mobile?: boolean;
 };
-declare const BaseModalContext: React.Context<BaseModalContext>;
-declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
-export { BaseModalProps, BaseModalContext, BaseModal };
+declare const Header: React.FC<HeaderProps>;
+export { HeaderProps, Header };

package/{esm/Component.mobile-e81c389f.d.ts → Component.mobile-b2c0420d.d.ts}

@@ -1,10 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { FC, ReactNode } from "react";
-import { NavigationBarProps } from "./index-e81c389f";
 import { ContentProps, ModalMobileProps } from "./typings-bdb4c6b9";
-type HeaderProps = Omit<NavigationBarProps, "size" | "view" | "parentRef">;
-declare const Header: FC<HeaderProps>;
 declare const Content: FC<ContentProps>;
 type FooterProps = {
     /**
@@ -31,8 +28,8 @@ type FooterProps = {
 declare const Footer: FC<FooterProps>;
 declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
     Content: React.FC<import("./typings-bdb4c6b9").ContentProps>;
-    Header: React.FC<HeaderProps>;
+    Header: React.FC<import("./Component-5e1b8383").HeaderProps>;
     Footer: React.FC<FooterProps>;
     Closer: React.FC<import("./index-e81c389f").CloserProps>;
 };
-export { HeaderProps, Header, Content, FooterProps, Footer, ModalMobile };
+export { Content, FooterProps, Footer, ModalMobile };

package/{esm/Component.responsive-abcc39aa.d.ts → Component.responsive-2aef4eba.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import React from "react";
 import { AdditionalMobileProps } from "./index-3e68f8db";
-import { PickerButtonDesktopProps } from "./Component-abcc39aa";
+import { PickerButtonDesktopProps } from "./Component-2aef4eba";
 import { ButtonProps } from "./index-ebda875c";
 type PickerButtonMobileProps = Omit<PickerButtonDesktopProps, "OptionsList" | "Checkmark" | "onScroll"> & AdditionalMobileProps;
 declare const PickerButtonMobile: React.ForwardRefExoticComponent<Omit<PickerButtonDesktopProps, "onScroll" | "OptionsList" | "Checkmark"> & AdditionalMobileProps & React.RefAttributes<HTMLInputElement>>;
@@ -13,12 +13,12 @@ type PickerButtonResponsiveProps = PickerButtonDesktopProps & AdditionalMobilePr
      */
     breakpoint?: number;
 };
-declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("./index-3e68f8db").BaseSelectProps, "placeholder" | "onFocus" | "size" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "fieldProps" | "Arrow" | "Field"> & Pick<ButtonProps, "rightAddons" | "leftAddons" | "view" | "loading"> & {
+declare const PickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("./index-3e68f8db").BaseSelectProps, "placeholder" | "onFocus" | "size" | "selected" | "multiple" | "hint" | "options" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "Arrow"> & Pick<ButtonProps, "rightAddons" | "leftAddons" | "view" | "loading"> & {
     options: ((import("./index-3e68f8db").OptionShape | import("./index-3e68f8db").GroupShape) & {
         icon?: React.FC<React.SVGProps<SVGSVGElement>> | undefined;
     })[];
-    size?: import("./Component-abcc39aa").PickerButtonSize | undefined;
-    variant?: import("./Component-abcc39aa").PickerButtonVariant | undefined;
+    size?: import("./Component-2aef4eba").PickerButtonSize | undefined;
+    variant?: import("./Component-2aef4eba").PickerButtonVariant | undefined;
     showArrow?: boolean | undefined;
 } & AdditionalMobileProps & {
     /**

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-0f7a6fdd.js');
+var index_module = require('../../index.module-77258299.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-0f7a6fdd.js');
+var index_module = require('../../index.module-77258299.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_1e8y8 tabs__title_929ww","mobile":"tabs__mobile_1e8y8"};
+var mobileStyles = {"title":"tabs__title_1t2w8 tabs__title_no3qa","mobile":"tabs__mobile_1t2w8"};
 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-0f7a6fdd.js');
+require('../../index.module-77258299.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: 190gt */
+/* hash: 19tag */
 :root {
 } /* deprecated */ :root {
     --color-light-border-accent: #ef3124;
@@ -83,11 +83,11 @@
     /* size l */
 
     /* size xl */
-} .tabs__component_929ww {
+} .tabs__component_no3qa {
     position: relative;
     display: inline-flex;
     min-width: 100%
-} .tabs__component_929ww:before {
+} .tabs__component_no3qa:before {
         content: '';
         display: block;
         position: absolute;
@@ -95,17 +95,17 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    } .tabs__fullWidthScroll_929ww {
+    } .tabs__fullWidthScroll_no3qa {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);
-} .tabs__container_929ww {
+} .tabs__container_no3qa {
     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_929ww {
+} .tabs__title_no3qa {
     display: flex;
     align-items: center;
     height: 100%;
@@ -122,76 +122,76 @@
             user-select: none;
     cursor: pointer;
     outline: none
-} .tabs__title_929ww:not(.tabs__disabled_929ww):hover {
+} .tabs__title_no3qa:not(.tabs__disabled_no3qa):hover {
         color: var(--primary-tablist-hover-color);
-    } .tabs__focused_929ww {
+    } .tabs__focused_no3qa {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-} .tabs__collapsed_929ww {
+} .tabs__collapsed_no3qa {
     order: 99;
     visibility: collapse;
-} .tabs__selected_929ww {
+} .tabs__selected_no3qa {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-} .tabs__disabled_929ww {
+} .tabs__disabled_no3qa {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-} .tabs__line_929ww {
+} .tabs__line_no3qa {
     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_929ww .tabs__title_929ww, .tabs__xs_929ww .tabs__title_929ww, .tabs__xxs_929ww .tabs__title_929ww {
+} /* sizes */ .tabs__s_no3qa .tabs__title_no3qa, .tabs__xs_no3qa .tabs__title_no3qa, .tabs__xxs_no3qa .tabs__title_no3qa {
         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_929ww .tabs__title_929ww + .tabs__title_929ww, .tabs__xs_929ww .tabs__title_929ww + .tabs__title_929ww, .tabs__xxs_929ww .tabs__title_929ww + .tabs__title_929ww {
+    } .tabs__s_no3qa .tabs__title_no3qa + .tabs__title_no3qa, .tabs__xs_no3qa .tabs__title_no3qa + .tabs__title_no3qa, .tabs__xxs_no3qa .tabs__title_no3qa + .tabs__title_no3qa {
         margin-left: var(--primary-tablist-s-gaps);
-    } .tabs__s_929ww .tabs__pickerWrapper_929ww, .tabs__xs_929ww .tabs__pickerWrapper_929ww, .tabs__xxs_929ww .tabs__pickerWrapper_929ww {
+    } .tabs__s_no3qa .tabs__pickerWrapper_no3qa, .tabs__xs_no3qa .tabs__pickerWrapper_no3qa, .tabs__xxs_no3qa .tabs__pickerWrapper_no3qa {
         margin-left: var(--primary-tablist-s-gaps);
-    } .tabs__s_929ww .tabs__option_929ww, .tabs__xs_929ww .tabs__option_929ww, .tabs__xxs_929ww .tabs__option_929ww {
+    } .tabs__s_no3qa .tabs__option_no3qa, .tabs__xs_no3qa .tabs__option_no3qa, .tabs__xxs_no3qa .tabs__option_no3qa {
         padding: 0;
-    } .tabs__m_929ww .tabs__title_929ww {
+    } .tabs__m_no3qa .tabs__title_no3qa {
         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_929ww .tabs__title_929ww + .tabs__title_929ww {
+    } .tabs__m_no3qa .tabs__title_no3qa + .tabs__title_no3qa {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_929ww .tabs__pickerWrapper_929ww {
+    } .tabs__m_no3qa .tabs__pickerWrapper_no3qa {
         margin-left: var(--primary-tablist-m-gaps);
-    } .tabs__m_929ww .tabs__option_929ww {
+    } .tabs__m_no3qa .tabs__option_no3qa {
         padding: 0;
-    } .tabs__l_929ww .tabs__title_929ww {
+    } .tabs__l_no3qa .tabs__title_no3qa {
         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_929ww .tabs__title_929ww + .tabs__title_929ww {
+    } .tabs__l_no3qa .tabs__title_no3qa + .tabs__title_no3qa {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_929ww .tabs__pickerWrapper_929ww {
+    } .tabs__l_no3qa .tabs__pickerWrapper_no3qa {
         margin-left: var(--primary-tablist-l-gaps);
-    } .tabs__l_929ww .tabs__option_929ww {
+    } .tabs__l_no3qa .tabs__option_no3qa {
         padding: 0;
-    } .tabs__xl_929ww .tabs__title_929ww {
+    } .tabs__xl_no3qa .tabs__title_no3qa {
         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_929ww .tabs__title_929ww + .tabs__title_929ww {
+    } .tabs__xl_no3qa .tabs__title_no3qa + .tabs__title_no3qa {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_929ww .tabs__pickerWrapper_929ww {
+    } .tabs__xl_no3qa .tabs__pickerWrapper_no3qa {
         margin-left: var(--primary-tablist-xl-gaps);
-    } .tabs__xl_929ww .tabs__option_929ww {
+    } .tabs__xl_no3qa .tabs__option_no3qa {
         padding: 0;
-    } .tabs__rightAddons_929ww {
+    } .tabs__rightAddons_no3qa {
     display: flex;
     justify-content: center;
     align-items: center;

package/components/primary-tablist/mobile.css

@@ -1,4 +1,4 @@
-/* hash: disc0 */
+/* hash: 9mt3v */
 :root {
 }/* deprecated */:root {
     --color-light-border-accent: #ef3124;
@@ -90,11 +90,11 @@
     /* size l */
 
     /* size xl */
-}.tabs__component_929ww {
+}.tabs__component_no3qa {
     position: relative;
     display: inline-flex;
     min-width: 100%
-}.tabs__component_929ww:before {
+}.tabs__component_no3qa:before {
         content: '';
         display: block;
         position: absolute;
@@ -102,17 +102,17 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    }.tabs__fullWidthScroll_929ww {
+    }.tabs__fullWidthScroll_no3qa {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);
-}.tabs__container_929ww {
+}.tabs__container_no3qa {
     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_929ww {
+}.tabs__title_no3qa {
     display: flex;
     align-items: center;
     height: 100%;
@@ -129,76 +129,76 @@
             user-select: none;
     cursor: pointer;
     outline: none
-}.tabs__title_929ww:not(.tabs__disabled_929ww):hover {
+}.tabs__title_no3qa:not(.tabs__disabled_no3qa):hover {
         color: var(--primary-tablist-hover-color);
-    }.tabs__focused_929ww {
+    }.tabs__focused_no3qa {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
-}.tabs__collapsed_929ww {
+}.tabs__collapsed_no3qa {
     order: 99;
     visibility: collapse;
-}.tabs__selected_929ww {
+}.tabs__selected_no3qa {
     cursor: default;
     color: var(--primary-tablist-selected-color);
-}.tabs__disabled_929ww {
+}.tabs__disabled_no3qa {
     cursor: var(--disabled-cursor);
     color: var(--primary-tablist-disabled-color);
-}.tabs__line_929ww {
+}.tabs__line_no3qa {
     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_929ww .tabs__title_929ww, .tabs__xs_929ww .tabs__title_929ww, .tabs__xxs_929ww .tabs__title_929ww {
+}/* sizes */.tabs__s_no3qa .tabs__title_no3qa, .tabs__xs_no3qa .tabs__title_no3qa, .tabs__xxs_no3qa .tabs__title_no3qa {
         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_929ww .tabs__title_929ww + .tabs__title_929ww, .tabs__xs_929ww .tabs__title_929ww + .tabs__title_929ww, .tabs__xxs_929ww .tabs__title_929ww + .tabs__title_929ww {
+    }.tabs__s_no3qa .tabs__title_no3qa + .tabs__title_no3qa, .tabs__xs_no3qa .tabs__title_no3qa + .tabs__title_no3qa, .tabs__xxs_no3qa .tabs__title_no3qa + .tabs__title_no3qa {
         margin-left: var(--primary-tablist-s-gaps);
-    }.tabs__s_929ww .tabs__pickerWrapper_929ww, .tabs__xs_929ww .tabs__pickerWrapper_929ww, .tabs__xxs_929ww .tabs__pickerWrapper_929ww {
+    }.tabs__s_no3qa .tabs__pickerWrapper_no3qa, .tabs__xs_no3qa .tabs__pickerWrapper_no3qa, .tabs__xxs_no3qa .tabs__pickerWrapper_no3qa {
         margin-left: var(--primary-tablist-s-gaps);
-    }.tabs__s_929ww .tabs__option_929ww, .tabs__xs_929ww .tabs__option_929ww, .tabs__xxs_929ww .tabs__option_929ww {
+    }.tabs__s_no3qa .tabs__option_no3qa, .tabs__xs_no3qa .tabs__option_no3qa, .tabs__xxs_no3qa .tabs__option_no3qa {
         padding: 0;
-    }.tabs__m_929ww .tabs__title_929ww {
+    }.tabs__m_no3qa .tabs__title_no3qa {
         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_929ww .tabs__title_929ww + .tabs__title_929ww {
+    }.tabs__m_no3qa .tabs__title_no3qa + .tabs__title_no3qa {
         margin-left: var(--primary-tablist-m-gaps);
-    }.tabs__m_929ww .tabs__pickerWrapper_929ww {
+    }.tabs__m_no3qa .tabs__pickerWrapper_no3qa {
         margin-left: var(--primary-tablist-m-gaps);
-    }.tabs__m_929ww .tabs__option_929ww {
+    }.tabs__m_no3qa .tabs__option_no3qa {
         padding: 0;
-    }.tabs__l_929ww .tabs__title_929ww {
+    }.tabs__l_no3qa .tabs__title_no3qa {
         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_929ww .tabs__title_929ww + .tabs__title_929ww {
+    }.tabs__l_no3qa .tabs__title_no3qa + .tabs__title_no3qa {
         margin-left: var(--primary-tablist-l-gaps);
-    }.tabs__l_929ww .tabs__pickerWrapper_929ww {
+    }.tabs__l_no3qa .tabs__pickerWrapper_no3qa {
         margin-left: var(--primary-tablist-l-gaps);
-    }.tabs__l_929ww .tabs__option_929ww {
+    }.tabs__l_no3qa .tabs__option_no3qa {
         padding: 0;
-    }.tabs__xl_929ww .tabs__title_929ww {
+    }.tabs__xl_no3qa .tabs__title_no3qa {
         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_929ww .tabs__title_929ww + .tabs__title_929ww {
+    }.tabs__xl_no3qa .tabs__title_no3qa + .tabs__title_no3qa {
         margin-left: var(--primary-tablist-xl-gaps);
-    }.tabs__xl_929ww .tabs__pickerWrapper_929ww {
+    }.tabs__xl_no3qa .tabs__pickerWrapper_no3qa {
         margin-left: var(--primary-tablist-xl-gaps);
-    }.tabs__xl_929ww .tabs__option_929ww {
+    }.tabs__xl_no3qa .tabs__option_no3qa {
         padding: 0;
-    }.tabs__rightAddons_929ww {
+    }.tabs__rightAddons_no3qa {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -516,6 +516,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);
@@ -668,6 +672,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);
@@ -1090,13 +1098,13 @@
 
     /* size xl */
     --secondary-tablist-xl-gaps: var(--gap-m);
-} .tabs__title_1e8y8 {
-} .tabs__mobile_1e8y8 .tabs__title_1e8y8 {
+} .tabs__title_1t2w8 {
+} .tabs__mobile_1t2w8 .tabs__title_1t2w8 {
         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_1e8y8 .tabs__title_1e8y8 + .tabs__title_1e8y8 {
+    } .tabs__mobile_1t2w8 .tabs__title_1t2w8 + .tabs__title_1t2w8 {
             margin-left: var(--primary-tablist-mobile-gaps);
         }