@alfalab/core-components-tabs 7.7.1 → 8.0.0

package/cssm/components/tabs/Component.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Tabs = function (_a) {
-    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatch = _a.defaultMatch, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsible = _a.collapsible, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange;
+    var TabList = _a.TabList, className = _a.className, containerClassName = _a.containerClassName, size = _a.size, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, selectedId = _a.selectedId, scrollable = _a.scrollable, collapsedTabsIds = _a.collapsedTabsIds, _b = _a.fullWidthScroll, fullWidthScroll = _b === void 0 ? false : _b, _c = _a.keepMounted, keepMounted = _c === void 0 ? false : _c, dataTestId = _a.dataTestId, onChange = _a.onChange, _d = _a.breakpoint, breakpoint = _d === void 0 ? 1024 : _d;
     var tabsArray = React__default.default.Children.toArray(children);
     var titles = tabsArray.map(function (_a) {
         var _b = _a.props, title = _b.title, id = _b.id, rightAddons = _b.rightAddons, disabled = _b.disabled, hidden = _b.hidden, toggleClassName = _b.toggleClassName, toggleTestId = _b.dataTestId;
@@ -25,7 +25,7 @@ var Tabs = function (_a) {
     });
     var tabs = tabsArray.filter(function (tab) { return tab.props.id === selectedId || tab.props.keepMounted || keepMounted; });
     return (React__default.default.createElement("div", { className: className },
-        React__default.default.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsible: collapsible, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatch: defaultMatch, fullWidthScroll: fullWidthScroll }),
+        React__default.default.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, breakpoint: breakpoint }),
         tabs.map(function (tab) { return React.cloneElement(tab, { hidden: tab.props.id !== selectedId }); })));
 };
 

package/cssm/components/tabs/Component.mobile.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
+import React from 'react';
 import { TabsProps } from "../../typings";
-type TabsMobileProps = Omit<TabsProps, 'TabList' | 'size' | 'collapsible' | 'collapsedTabsIds'>;
-declare const TabsMobile: ({ view, scrollable, ...restProps }: TabsMobileProps) => JSX.Element;
+type TabsMobileProps = Omit<TabsProps, 'TabList' | 'size' | 'collapsedTabsIds'>;
+declare const TabsMobile: ({ view, scrollable, ...restProps }: TabsMobileProps) => React.JSX.Element;
 export { TabsMobileProps, TabsMobile };

package/cssm/components/tabs/Component.mobile.js

@@ -9,23 +9,17 @@ var components_secondaryTablist_Component_mobile = require('../secondary-tablist
 var components_tabs_Component = require('./Component.js');
 require('classnames');
 require('../primary-tablist/Component.js');
-require('@alfalab/core-components-badge/cssm');
 require('@alfalab/core-components-keyboard-focusable/cssm');
-require('@alfalab/core-components-picker-button/cssm/desktop');
-require('../../hooks/use-tablist-titles.js');
-require('@alfalab/hooks');
-require('../../hooks/use-collapsible-elements.js');
-require('@juggle/resize-observer');
 require('../../hooks/use-tabs.js');
-require('../../synthetic-events.js');
+require('@alfalab/core-components-shared/cssm');
 require('../scrollable-container/Component.js');
 require('compute-scroll-into-view');
 require('../scrollable-container/index.module.css');
 require('../title/Component.js');
 require('../primary-tablist/index.module.css');
 require('../primary-tablist/mobile.module.css');
+require('@alfalab/core-components-tag/cssm/mobile');
 require('../secondary-tablist/Component.js');
-require('@alfalab/core-components-tag/cssm');
 require('../secondary-tablist/index.module.css');
 require('../secondary-tablist/mobile.module.css');
 

package/cssm/components/tabs/Component.responsive.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
+import React from 'react';
 import { TabsProps } from "../../typings";
-type TabsResponsiveProps = Omit<TabsProps, 'TabList'>;
-declare const TabsResponsive: ({ view, scrollable, ...restProps }: TabsResponsiveProps) => JSX.Element;
+type TabsResponsiveProps = Omit<TabsProps, 'TabList' | 'collapsedTabsIds'>;
+declare const TabsResponsive: ({ view, scrollable, ...restProps }: TabsResponsiveProps) => React.JSX.Element;
 export { TabsResponsiveProps, TabsResponsive };

package/cssm/components/tabs/Component.responsive.js

@@ -7,18 +7,13 @@ var React = require('react');
 var components_primaryTablist_Component_responsive = require('../primary-tablist/Component.responsive.js');
 var components_secondaryTablist_Component_responsive = require('../secondary-tablist/Component.responsive.js');
 var components_tabs_Component = require('./Component.js');
-require('@alfalab/hooks');
+require('@alfalab/core-components-mq/cssm');
 require('../primary-tablist/Component.desktop.js');
 require('../primary-tablist/Component.js');
 require('classnames');
-require('@alfalab/core-components-badge/cssm');
 require('@alfalab/core-components-keyboard-focusable/cssm');
-require('@alfalab/core-components-picker-button/cssm/desktop');
-require('../../hooks/use-tablist-titles.js');
-require('../../hooks/use-collapsible-elements.js');
-require('@juggle/resize-observer');
 require('../../hooks/use-tabs.js');
-require('../../synthetic-events.js');
+require('@alfalab/core-components-shared/cssm');
 require('../scrollable-container/Component.js');
 require('compute-scroll-into-view');
 require('../scrollable-container/index.module.css');
@@ -27,10 +22,11 @@ require('../primary-tablist/index.module.css');
 require('../primary-tablist/Component.mobile.js');
 require('../primary-tablist/mobile.module.css');
 require('../secondary-tablist/Component.desktop.js');
+require('@alfalab/core-components-tag/cssm/desktop');
 require('../secondary-tablist/Component.js');
-require('@alfalab/core-components-tag/cssm');
 require('../secondary-tablist/index.module.css');
 require('../secondary-tablist/Component.mobile.js');
+require('@alfalab/core-components-tag/cssm/mobile');
 require('../secondary-tablist/mobile.module.css');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

package/cssm/desktop-2e2b2125.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/cssm/desktop.d.ts

@@ -1,8 +1,4 @@
 export * from "./components/primary-tablist/Component.desktop";
-export * from "./components/scrollable-container/index";
 export * from "./components/secondary-tablist/Component.desktop";
 export * from "./components/tab/index";
 export * from "./components/tabs/Component.desktop";
-export * from "./hooks/use-tabs";
-export * from "./hooks/use-collapsible-elements";
-export * from "./typings";

package/cssm/desktop.js

@@ -3,39 +3,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var components_primaryTablist_Component_desktop = require('./components/primary-tablist/Component.desktop.js');
-var components_scrollableContainer_Component = require('./components/scrollable-container/Component.js');
 var components_secondaryTablist_Component_desktop = require('./components/secondary-tablist/Component.desktop.js');
 var components_tab_Component = require('./components/tab/Component.js');
 var components_tabs_Component_desktop = require('./components/tabs/Component.desktop.js');
-var hooks_useTabs = require('./hooks/use-tabs.js');
-var hooks_useCollapsibleElements = require('./hooks/use-collapsible-elements.js');
 require('tslib');
 require('react');
 require('./components/primary-tablist/Component.js');
 require('classnames');
-require('@alfalab/core-components-badge/cssm');
 require('@alfalab/core-components-keyboard-focusable/cssm');
-require('@alfalab/core-components-picker-button/cssm/desktop');
-require('./hooks/use-tablist-titles.js');
-require('@alfalab/hooks');
-require('./synthetic-events.js');
-require('./components/title/Component.js');
-require('./components/primary-tablist/index.module.css');
+require('./hooks/use-tabs.js');
+require('@alfalab/core-components-shared/cssm');
+require('./components/scrollable-container/Component.js');
 require('compute-scroll-into-view');
 require('./components/scrollable-container/index.module.css');
+require('./components/title/Component.js');
+require('./components/primary-tablist/index.module.css');
+require('@alfalab/core-components-tag/cssm/desktop');
 require('./components/secondary-tablist/Component.js');
-require('@alfalab/core-components-tag/cssm');
 require('./components/secondary-tablist/index.module.css');
 require('./components/tab/index.module.css');
 require('./components/tabs/Component.js');
-require('@juggle/resize-observer');
 
 
 
 exports.PrimaryTabListDesktop = components_primaryTablist_Component_desktop.PrimaryTabListDesktop;
-exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
 exports.SecondaryTabListDesktop = components_secondaryTablist_Component_desktop.SecondaryTabListDesktop;
 exports.Tab = components_tab_Component.Tab;
 exports.TabsDesktop = components_tabs_Component_desktop.TabsDesktop;
-exports.useTabs = hooks_useTabs.useTabs;
-exports.useCollapsibleElements = hooks_useCollapsibleElements.useCollapsibleElements;

package/cssm/{hook-3e68f8db.d.ts → hook-9ea9e32c.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseSelectProps, OptionShape } from "./index-3e68f8db";
+import { BaseSelectProps, OptionShape } from "./typings-5e1b8383";
 type UseSelectWithApplyProps = {
     /**
      * Список выбранных пунктов
@@ -36,18 +36,20 @@ type UseSelectWithApplyProps = {
 };
 declare const SELECT_ALL_KEY = "select_all";
 declare function useSelectWithApply({ options, selected, onChange, OptionsList, optionsListProps, showClear, showSelectAll, showHeaderWithSelectAll, }: UseSelectWithApplyProps): {
-    OptionsList: import("react").ForwardRefExoticComponent<import("./index-3e68f8db").OptionsListProps & {
+    OptionsList: import("react").ForwardRefExoticComponent<import("./typings-5e1b8383").OptionsListProps & {
         showClear?: boolean | undefined;
         onClose?: (() => void) | undefined;
         selectedDraft?: OptionShape[] | undefined;
-        OptionsList?: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
-        Footer?: import("react").FC<import("./Component-ebda875c").FooterProps> | undefined;
+        OptionsList?: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        Footer?: import("react").FC<import("./Component-5e1b8383").FooterProps> | undefined;
         Header?: import("react").FC<import("./Component-ebda875c").HeaderProps> | undefined;
-        headerProps?: import("./Component-ebda875c").HeaderProps | undefined;
+        headerProps?: import("./Component-ebda875c").HeaderProps | undefined; /**
+         * Показывать кнопку очистки
+         */
         showHeaderWithSelectAll?: boolean | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     optionsListProps: {
-        OptionsList: import("react").FC<import("./index-3e68f8db").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
+        OptionsList: import("react").FC<import("./typings-5e1b8383").OptionsListProps & import("react").RefAttributes<HTMLDivElement>> | undefined;
         showClear: boolean;
         onClear: () => void;
         onApply: () => void;
@@ -62,11 +64,11 @@ declare function useSelectWithApply({ options, selected, onChange, OptionsList,
     };
     allowUnselect: boolean;
     multiple: boolean;
-    options: (OptionShape | import("./index-3e68f8db").GroupShape | {
+    options: (OptionShape | import("./typings-5e1b8383").GroupShape | {
         key: string;
         content: string;
     })[];
-    onChange: (payload: import("./index-3e68f8db").BaseSelectChangePayload) => void;
+    onChange: (payload: import("./typings-5e1b8383").BaseSelectChangePayload) => void;
     selected: string | OptionShape | (string | OptionShape)[] | null | undefined;
 };
 export * from "./Component-5e1b8383";

package/cssm/hooks/use-tablist-titles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TabListProps } from "../typings";
-declare const useTablistTitles: ({ titles, selectedId, collapsible, collapsedTabsIds, breakpoint, onChange, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsible' | 'collapsedTabsIds' | 'onChange'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
+declare const useTablistTitles: ({ titles, selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }: Pick<TabListProps, 'titles' | 'selectedId' | 'collapsedTabsIds' | 'onChange' | 'defaultMatchMediaValue'> & Required<Pick<TabListProps, 'breakpoint'>>) => {
     containerRef: import("react").RefObject<HTMLDivElement>;
     addonRef: import("react").RefObject<HTMLInputElement>;
     tablistTitles: {
@@ -20,6 +20,7 @@ declare const useTablistTitles: ({ titles, selectedId, collapsible, collapsedTab
         role: string;
         tabIndex: number;
         'aria-selected': boolean;
+        selected: boolean;
         'data-test-id': string | undefined;
         disabled: boolean | undefined;
         ref: (node: HTMLButtonElement) => void;

package/cssm/hooks/use-tablist-titles.js

@@ -4,19 +4,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var hooks = require('@alfalab/hooks');
+var coreComponentsMq = require('@alfalab/core-components-mq/cssm');
 var hooks_useCollapsibleElements = require('./use-collapsible-elements.js');
 var hooks_useTabs = require('./use-tabs.js');
 require('@juggle/resize-observer');
+require('@alfalab/hooks');
+require('@alfalab/core-components-shared/cssm');
 
 var useTablistTitles = function (_a) {
-    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsible = _a.collapsible, collapsedTabsIds = _a.collapsedTabsIds, breakpoint = _a.breakpoint, onChange = _a.onChange;
+    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, collapsedTabsIds = _a.collapsedTabsIds, breakpoint = _a.breakpoint, onChange = _a.onChange, defaultMatchMediaValue = _a.defaultMatchMediaValue;
     var _c = hooks_useCollapsibleElements.useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]), containerRef = _c.containerRef, addonRef = _c.addonRef, idsCollapsedElements = _c.idsCollapsedElements;
-    var view = hooks.useMedia([['desktop', "(min-width: ".concat(breakpoint, "px)")]], 'desktop')[0];
+    var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     var tablistTitles = React.useMemo(function () {
         var idsCollapsedTitles = [];
         var idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
-        if (view === 'desktop' && collapsible) {
+        if (isDesktop) {
             var visibleTitles = titles.filter(function (_a) {
                 var id = _a.id;
                 return !idsCollapsed.includes(String(id));
@@ -50,7 +52,7 @@ var useTablistTitles = function (_a) {
             }
             return a.collapsed ? 1 : -1;
         });
-    }, [collapsedTabsIds, idsCollapsedElements, view, collapsible, titles, selectedId]);
+    }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);
     var _d = hooks_useTabs.useTabs({
         titles: tablistTitles,
         selectedId: selectedId,

package/cssm/hooks/use-tabs.d.ts

@@ -5,6 +5,7 @@ declare function useTabs({ titles, selectedId, onChange }: UseTabsProps): {
         role: string;
         tabIndex: number;
         'aria-selected': boolean;
+        selected: boolean;
         'data-test-id': string | undefined;
         disabled: boolean | undefined;
         ref: (node: HTMLButtonElement) => void;

package/cssm/hooks/use-tabs.js

@@ -3,11 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-
-var getDataTestId = function (dataTestId, element) {
-    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
-    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
-};
+var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
 
 function useTabs(_a) {
     var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, onChange = _a.onChange;
@@ -82,7 +78,8 @@ function useTabs(_a) {
             role: 'tab',
             tabIndex: itemSelected ? 0 : -1,
             'aria-selected': itemSelected,
-            'data-test-id': getDataTestId(item.dataTestId, 'toggle'),
+            selected: itemSelected,
+            'data-test-id': coreComponentsShared.getDataTestId(item.dataTestId, 'toggle'),
             disabled: item.disabled,
             ref: function (node) {
                 // eslint-disable-next-line no-param-reassign

package/cssm/index-8b2c2707.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from "react";
+import { ButtonProps } from "./typings-9211a437";
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { Button };
+export type { ButtonProps } from "./typings-9211a437";

package/cssm/index-c44170fe.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import React from "react";
+type InputProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<BaseInputProps, "FormControlComponent" | "colorStyles"> & {
+    breakpoint?: number | undefined;
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+type InputDesktopProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
+declare const InputDesktop: React.ForwardRefExoticComponent<InputDesktopProps & React.RefAttributes<HTMLInputElement>>;
+type InputMobileProps = Omit<BaseInputProps, "FormControlComponent" | "colorStyles">;
+declare const InputMobile: React.ForwardRefExoticComponent<InputMobileProps & React.RefAttributes<HTMLInputElement>>;
+export { InputProps, Input, InputDesktopProps, InputDesktop, InputMobileProps, InputMobile };
+export * from "./Component.desktop-785df74d";

package/cssm/index-e81c389f.d.ts

@@ -1,3 +1,142 @@
-export * from "./Component-3885b0d7";
-export * from "./index-ebda875c";
-export type { NavigationBarProps } from "./types-ebda875c";
+/// <reference types="react" />
+/* eslint-disable complexity */
+import React from "react";
+import { ReactNode, ButtonHTMLAttributes, ElementType, FC } from "react";
+interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Вид компонента
+     */
+    view: "desktop" | "mobile";
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Позиция крестика
+     */
+    align?: "left" | "right";
+    /**
+     * Фиксирует крестик
+     */
+    sticky?: boolean;
+    /**
+     * Иконка
+     */
+    icon?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Коллбэк закрытия.
+     */
+    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+}
+declare const Closer: FC<CloserProps>;
+type NavigationBarProps = {
+    /**
+     * Контент шапки
+     */
+    children?: ReactNode;
+    /**
+     * Заголовок шапки
+     */
+    title?: string;
+    /**
+     * Подзаголовок (доступен только в мобильной версии)
+     */
+    subtitle?: string;
+    /**
+     * Размер заголовка (compact доступен только в мобильной версии)
+     */
+    titleSize?: "default" | "compact";
+    /**
+     * Доп. класс для аддонов
+     */
+    addonClassName?: string;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Дополнительный класс для closer
+     */
+    closerClassName?: string;
+    /**
+     * Слот снизу
+     */
+    bottomAddons?: ReactNode;
+    /**
+     * Наличие компонента крестика
+     */
+    hasCloser?: boolean;
+    /**
+     * Наличие кнопки "Назад"
+     */
+    hasBackButton?: boolean;
+    /**
+     * Дополнительный класс для правого аддона
+     */
+    backButtonClassName?: string;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для контента
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс для нижнего аддона
+     */
+    bottomAddonsClassName?: string;
+    /**
+     * Выравнивание заголовка
+     */
+    align?: "left" | "center";
+    /**
+     * Обрезать ли заголовок
+     */
+    trim?: boolean;
+    /**
+     * Фиксирует шапку
+     */
+    sticky?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Фоновое изображение
+     */
+    imageUrl?: string;
+    /**
+     * Иконка closer.
+     */
+    closerIcon?: React.ElementType;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: CloserProps["onClose"];
+    /**
+     * обработчик клика по кнопке "назад"
+     */
+    onBack?: () => void;
+    /**
+     * Вид шапки - мобильный или десктоп
+     */
+    view: "desktop" | "mobile";
+    /**
+     * Ссылка на родительскую ноду overflow: auto
+     */
+    scrollableParentRef?: React.RefObject<HTMLDivElement>;
+};
+declare const NavigationBar: React.ForwardRefExoticComponent<NavigationBarProps & React.RefAttributes<HTMLDivElement>>;
+export { NavigationBar, CloserProps, Closer };
+export * from "./Component-63dec22f";
+export * from "./Component-8b2c2707";
+export type { NavigationBarProps };

package/cssm/index-ebda875c.d.ts

@@ -1,37 +1,105 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from "react";
-import { ButtonHTMLAttributes, ElementType, FC } from "react";
-interface CloserProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { ButtonHTMLAttributes, ReactNode, RefObject } from "react";
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type NativeProps = ButtonHTMLAttributes<HTMLButtonElement>;
+type BaseTagProps = Omit<NativeProps, "onClick"> & {
     /**
-     * Вид компонента
+     * Отображение кнопки в отмеченном (зажатом) состоянии
      */
-    view: "desktop" | "mobile";
+    checked?: boolean;
     /**
-     * Дополнительный класс
+     * Размер компонента
      */
-    className?: string;
+    size?: "xxs" | "xs" | "s" | "m" | "l" | "xl";
     /**
-     * Позиция крестика
+     * Дочерние элементы.
      */
-    align?: "left" | "right";
+    children?: ReactNode;
     /**
-     * Фиксирует крестик
+     * Дополнительный класс для обёртки children
      */
-    sticky?: boolean;
+    childrenClassName?: string;
     /**
-     * Иконка
+     * Слот слева
      */
-    icon?: ElementType;
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
     /**
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
     /**
-     * Коллбэк закрытия.
+     * Обработчик нажатия
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void;
+    /**
+     * ref на children
+     */
+    childrenRef?: RefObject<HTMLSpanElement>;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: "default" | "inverted";
+    /**
+     * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
+     * Используйте props shape и view
+     * Вариант тега
+     */
+    variant?: "default" | "alt";
+    /**
+     * Форма тега
+     */
+    shape?: "rounded" | "rectangular";
+    /**
+     * Стиль тега
+     */
+    view?: "outlined" | "filled";
+    /**
+     * Основные стили компонента.
+     */
+    styles?: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
      */
-    onClose?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
-}
-declare const Closer: FC<CloserProps>;
-export { CloserProps, Closer };
-export * from "./Component-ebda875c";
+    colorStylesMap?: StyleColors;
+};
+declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClick"> & {
+    checked?: boolean | undefined;
+    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | undefined;
+    children?: ReactNode;
+    childrenClassName?: string | undefined;
+    leftAddons?: ReactNode;
+    rightAddons?: ReactNode;
+    dataTestId?: string | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        checked: boolean;
+        name?: string;
+    }) => void) | undefined;
+    childrenRef?: React.RefObject<HTMLSpanElement> | undefined;
+    colors?: "default" | "inverted" | undefined;
+    variant?: "default" | "alt" | undefined;
+    shape?: "rounded" | "rectangular" | undefined;
+    view?: "outlined" | "filled" | undefined;
+    styles?: {
+        [key: string]: string;
+    } | undefined;
+    colorStylesMap?: StyleColors | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { StyleColors, NativeProps, BaseTagProps, BaseTag };