@alfalab/core-components 41.12.0 → 42.0.0-beta.1

package/tabs/modern/components/primary-tablist/Component.collapsible.mobile.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import cn from 'classnames';
+import { CollapsiblePrimaryTabList } from './Component.collapsible.js';
+import { c as commonStyles } from '../../index.module-cd918b29.js';
+import { m as mobileStyles } from '../../mobile.module-823710bb.js';
+import '../../../../badge/modern';
+import '../../../../keyboard-focusable/modern';
+import '../../../../picker-button/modern/desktop';
+import '../../../../mq/modern';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../title/Component.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../synthetic-events.js';
+
+const styles = {
+    ...commonStyles,
+    ...mobileStyles,
+};
+const CollapsiblePrimaryTabListMobile = ({ className, ...restProps }) => (React.createElement(CollapsiblePrimaryTabList, { ...restProps, styles: styles, className: cn(className, styles.mobile) }));
+
+export { CollapsiblePrimaryTabListMobile };

package/tabs/modern/components/primary-tablist/Component.collapsible.responsive.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabListResponsive: ({ size, fullWidthScroll, breakpoint, defaultMatchMediaValue, ...restProps }: TabListProps) => JSX.Element;
+export { CollapsiblePrimaryTabListResponsive };

package/tabs/modern/components/primary-tablist/Component.collapsible.responsive.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useMatchMedia } from '../../../../mq/modern';
+import { CollapsiblePrimaryTabListDesktop } from './Component.collapsible.desktop.js';
+import { CollapsiblePrimaryTabListMobile } from './Component.collapsible.mobile.js';
+import 'classnames';
+import '../../../../badge/modern';
+import '../../../../keyboard-focusable/modern';
+import '../../../../picker-button/modern/desktop';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../title/Component.js';
+import '../../index.module-cd918b29.js';
+import '../../mobile.module-823710bb.js';
+import './Component.collapsible.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../synthetic-events.js';
+
+const CollapsiblePrimaryTabListResponsive = ({ size, fullWidthScroll, breakpoint = 768, defaultMatchMediaValue, ...restProps }) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(CollapsiblePrimaryTabListDesktop, { size: size, defaultMatchMediaValue: defaultMatchMediaValue, breakpoint: breakpoint, ...restProps })) : (React.createElement(CollapsiblePrimaryTabListMobile, { fullWidthScroll: fullWidthScroll, defaultMatchMediaValue: defaultMatchMediaValue, breakpoint: breakpoint, ...restProps }));
+};
+
+export { CollapsiblePrimaryTabListResponsive };

package/tabs/modern/components/primary-tablist/Component.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { Styles, TabListProps } from "../../typings";
-declare const PrimaryTabList: ({ size, styles, className, containerClassName, titles, selectedId, scrollable, collapsible, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint, }: TabListProps & Styles) => JSX.Element;
+declare const PrimaryTabList: ({ size, styles, className, containerClassName, titles, selectedId, scrollable, fullWidthScroll, onChange, dataTestId, }: TabListProps & Styles) => JSX.Element;
 export { PrimaryTabList };

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

@@ -2,18 +2,12 @@ import React from 'react';
 import { PrimaryTabList } from './Component.js';
 import { c as commonStyles } from '../../index.module-cd918b29.js';
 import 'classnames';
-import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';
-import '../../../../picker-button/modern/desktop';
-import '@alfalab/hooks';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
 
 const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, { ...restProps, size: size, styles: commonStyles }));
 

package/tabs/modern/components/primary-tablist/Component.js

@@ -1,26 +1,17 @@
-import React, { useRef, useEffect, useMemo } from 'react';
+import React, { useRef, useEffect } from 'react';
 import cn from 'classnames';
-import { Badge } from '../../../../badge/modern';
 import { KeyboardFocusable } from '../../../../keyboard-focusable/modern';
-import { PickerButtonDesktop } from '../../../../picker-button/modern/desktop';
-import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
-import { createSyntheticMouseEvent } from '../../synthetic-events.js';
+import { useTabs } from '../../hooks/use-tabs.js';
 import { ScrollableContainer } from '../scrollable-container/Component.js';
 import { Title } from '../title/Component.js';
-import '@alfalab/hooks';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import 'compute-scroll-into-view';
-import '../../hooks/use-collapsible-elements.js';
-import '../../hooks/use-tabs.js';
 
-const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, collapsible, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = 1024, }) => {
+const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, onChange, dataTestId, }) => {
     const lineRef = useRef(null);
-    const { containerRef, addonRef, tablistTitles, selectedTab, focusedTab, getTabListItemProps } = useTablistTitles({
+    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
         titles,
         selectedId,
-        collapsible,
-        collapsedTabsIds,
-        breakpoint,
         onChange,
     });
     useEffect(() => {
@@ -28,33 +19,13 @@ const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titl
             lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
             lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
         }
-    }, [selectedTab, tablistTitles]);
-    const collapsedOptions = useMemo(() => tablistTitles.reduce((options, title) => {
-        if (title.collapsed) {
-            options.push({
-                key: title.title,
-                value: title.id,
-                content: React.createElement(Title, { ...title, styles: styles, isOption: true }),
-            });
-        }
-        return options;
-    }, []), [tablistTitles, styles]);
-    const collapsedAddonsLength = tablistTitles.filter((title) => title.collapsed && title.rightAddons).length;
-    const handleOptionsChange = (payload) => {
-        if (payload.selected?.value && onChange) {
-            const nativeMouseEvent = new MouseEvent('change');
-            const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);
-            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });
-        }
-    };
+    }, [selectedTab]);
     const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
             [styles.fullWidthScroll]: fullWidthScroll,
         }) },
-        tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
-        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', className: styles.pickerWrapper },
-            React.createElement(PickerButtonDesktop, { fieldClassName: styles.title, optionClassName: cn(styles.pickerOption, size && styles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'l', view: 'ghost', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end' }))) : null,
+        titles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
         React.createElement("div", { className: styles.line, ref: lineRef })));
-    return scrollable && !collapsible ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { ref: containerRef, className: cn(styles.container, containerClassName) }, renderContent()));
+    return scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
 };
 
 export { PrimaryTabList };

package/tabs/modern/components/primary-tablist/Component.mobile.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TabListProps } from "../../typings";
-type PrimaryTabListMobileProps = Omit<TabListProps, 'size'>;
+type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
 declare const PrimaryTabListMobile: ({ className, ...restProps }: PrimaryTabListMobileProps) => JSX.Element;
 export { PrimaryTabListMobileProps, PrimaryTabListMobile };

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

@@ -2,21 +2,13 @@ import React from 'react';
 import cn from 'classnames';
 import { PrimaryTabList } from './Component.js';
 import { c as commonStyles } from '../../index.module-cd918b29.js';
-import '../../../../badge/modern';
+import { m as mobileStyles } from '../../mobile.module-823710bb.js';
 import '../../../../keyboard-focusable/modern';
-import '../../../../picker-button/modern/desktop';
-import '@alfalab/hooks';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
-
-const mobileStyles = {"title":"tabs__title_1t2w8 tabs__title_no3qa","mobile":"tabs__mobile_1t2w8"};
-require('./mobile.css');
 
 const styles = {
     ...commonStyles,

package/tabs/modern/components/primary-tablist/Component.responsive.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TabListProps } from "../../typings";
-declare const PrimaryTabListResponsive: ({ size, defaultMatch, collapsible, collapsedTabsIds, fullWidthScroll, ...restProps }: TabListProps) => JSX.Element;
+declare const PrimaryTabListResponsive: ({ size, breakpoint, fullWidthScroll, defaultMatchMediaValue, ...restProps }: TabListProps) => JSX.Element;
 export { PrimaryTabListResponsive };

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

@@ -1,28 +1,21 @@
 import React from 'react';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '../../../../mq/modern';
 import { PrimaryTabListDesktop } from './Component.desktop.js';
 import { PrimaryTabListMobile } from './Component.mobile.js';
 import 'classnames';
-import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';
-import '../../../../picker-button/modern/desktop';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
 import '../../index.module-cd918b29.js';
+import '../../mobile.module-823710bb.js';
 import './Component.js';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
 
-const PrimaryTabListResponsive = ({ size, defaultMatch = 'desktop', collapsible, collapsedTabsIds, fullWidthScroll, ...restProps }) => {
-    const [view] = useMedia([
-        ['mobile', '(max-width: 767px)'],
-        ['desktop', '(min-width: 768px)'],
-    ], defaultMatch);
-    return view === 'desktop' ? (React.createElement(PrimaryTabListDesktop, { collapsible: collapsible, collapsedTabsIds: collapsedTabsIds, size: size, ...restProps })) : (React.createElement(PrimaryTabListMobile, { fullWidthScroll: fullWidthScroll, ...restProps }));
+const PrimaryTabListResponsive = ({ size, breakpoint = 768, fullWidthScroll, defaultMatchMediaValue, ...restProps }) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(PrimaryTabListDesktop, { breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue, ...restProps })) : (React.createElement(PrimaryTabListMobile, { breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, ...restProps }));
 };
 
 export { PrimaryTabListResponsive };

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

@@ -3,6 +3,7 @@ import { SecondaryTabList } from './Component.js';
 import { c as commonStyles } from '../../index.module-71e56d00.js';
 import 'classnames';
 import '../../../../tag/modern';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../../hooks/use-tabs.js';

package/tabs/modern/components/secondary-tablist/Component.js

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import { Tag } from '../../../../tag/modern';
 import { useTabs } from '../../hooks/use-tabs.js';
 import { ScrollableContainer } from '../scrollable-container/Component.js';
+import '../../../../shared/modern';
 import 'compute-scroll-into-view';
 
 const SecondaryTabList = ({ styles = {}, className, containerClassName, size, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, tagSize = 'xs', onChange, dataTestId, }) => {

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

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import { SecondaryTabList } from './Component.js';
 import { c as commonStyles } from '../../index.module-71e56d00.js';
 import '../../../../tag/modern';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../../hooks/use-tabs.js';

package/tabs/modern/components/secondary-tablist/Component.responsive.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SecondaryTabListProps } from "../../typings";
-declare const SecondaryTabListResponsive: ({ size, defaultMatch, fullWidthScroll, ...restProps }: SecondaryTabListProps) => JSX.Element;
+declare const SecondaryTabListResponsive: ({ size, defaultMatchMediaValue, fullWidthScroll, breakpoint, ...restProps }: SecondaryTabListProps) => JSX.Element;
 export { SecondaryTabListResponsive };

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

@@ -1,21 +1,19 @@
 import React from 'react';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '../../../../mq/modern';
 import { SecondaryTabListDesktop } from './Component.desktop.js';
 import { SecondaryTabListMobile } from './Component.mobile.js';
 import 'classnames';
 import '../../../../tag/modern';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../../index.module-71e56d00.js';
 import './Component.js';
 import '../../hooks/use-tabs.js';
 
-const SecondaryTabListResponsive = ({ size, defaultMatch = 'desktop', fullWidthScroll, ...restProps }) => {
-    const [view] = useMedia([
-        ['mobile', '(max-width: 767px)'],
-        ['desktop', '(min-width: 768px)'],
-    ], defaultMatch);
-    return view === 'desktop' ? (React.createElement(SecondaryTabListDesktop, { size: size, ...restProps })) : (React.createElement(SecondaryTabListMobile, { fullWidthScroll: fullWidthScroll, ...restProps }));
+const SecondaryTabListResponsive = ({ size, defaultMatchMediaValue, fullWidthScroll, breakpoint = 768, ...restProps }) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(SecondaryTabListDesktop, { size: size, breakpoint: breakpoint, ...restProps })) : (React.createElement(SecondaryTabListMobile, { fullWidthScroll: fullWidthScroll, breakpoint: breakpoint, ...restProps }));
 };
 
 export { SecondaryTabListResponsive };

package/tabs/modern/components/tabs/Component.collabsible.desktop.d.ts

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

package/tabs/modern/components/tabs/Component.collabsible.desktop.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CollapsiblePrimaryTabListDesktop } from '../primary-tablist/Component.collapsible.desktop.js';
+import { Tabs } from './Component.js';
+import 'classnames';
+import '../../../../badge/modern';
+import '../../../../keyboard-focusable/modern';
+import '../../../../picker-button/modern/desktop';
+import '../../../../mq/modern';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../title/Component.js';
+import '../../index.module-cd918b29.js';
+import '../primary-tablist/Component.collapsible.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../synthetic-events.js';
+
+const TabsCollapsibleDesktop = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListDesktop, ...restProps }));
+
+export { TabsCollapsibleDesktop };

package/tabs/modern/components/tabs/Component.collapsible.mobile.d.ts

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

package/tabs/modern/components/tabs/Component.collapsible.mobile.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { CollapsiblePrimaryTabListMobile } from '../primary-tablist/Component.collapsible.mobile.js';
+import { Tabs } from './Component.js';
+import 'classnames';
+import '../../../../badge/modern';
+import '../../../../keyboard-focusable/modern';
+import '../../../../picker-button/modern/desktop';
+import '../../../../mq/modern';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../title/Component.js';
+import '../../index.module-cd918b29.js';
+import '../../mobile.module-823710bb.js';
+import '../primary-tablist/Component.collapsible.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../synthetic-events.js';
+
+const TabsCollapsibleMobile = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListMobile, ...restProps }));
+
+export { TabsCollapsibleMobile };

package/tabs/modern/components/tabs/Component.collapsible.responsive.d.ts

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

package/tabs/modern/components/tabs/Component.collapsible.responsive.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CollapsiblePrimaryTabListResponsive } from '../primary-tablist/Component.collapsible.responsive.js';
+import { Tabs } from './Component.js';
+import '../../../../mq/modern';
+import 'classnames';
+import '../../../../badge/modern';
+import '../../../../keyboard-focusable/modern';
+import '../../../../picker-button/modern/desktop';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../title/Component.js';
+import '../../index.module-cd918b29.js';
+import '../primary-tablist/Component.collapsible.mobile.js';
+import '../../mobile.module-823710bb.js';
+import '../primary-tablist/Component.collapsible.desktop.js';
+import '../primary-tablist/Component.collapsible.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../synthetic-events.js';
+
+const TabsCollapsibleResponsive = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListResponsive, ...restProps }));
+
+export { TabsCollapsibleResponsive };

package/tabs/modern/components/tabs/Component.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TabsProps } from "../../typings";
-declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, collapsible, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, }: Omit<TabsProps, 'view'>) => JSX.Element;
+declare const Tabs: ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll, keepMounted, dataTestId, onChange, }: Omit<TabsProps, 'view'>) => JSX.Element;
 export { Tabs };

package/tabs/modern/components/tabs/Component.desktop.d.ts

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

package/tabs/modern/components/tabs/Component.desktop.js

@@ -3,11 +3,8 @@ import { PrimaryTabListDesktop } from '../primary-tablist/Component.desktop.js';
 import { SecondaryTabListDesktop } from '../secondary-tablist/Component.desktop.js';
 import { Tabs } from './Component.js';
 import 'classnames';
-import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';
-import '../../../../picker-button/modern/desktop';
-import '@alfalab/hooks';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
@@ -15,10 +12,7 @@ import '../../index.module-cd918b29.js';
 import '../../../../tag/modern';
 import '../../index.module-71e56d00.js';
 import '../primary-tablist/Component.js';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
 import '../secondary-tablist/Component.js';
 
 const views = {

package/tabs/modern/components/tabs/Component.js

@@ -1,6 +1,6 @@
 import React, { cloneElement } from 'react';
 
-const Tabs = ({ TabList, className, containerClassName, size, defaultMatch, children, selectedId, scrollable, collapsible, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, }) => {
+const Tabs = ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, }) => {
     const tabsArray = React.Children.toArray(children);
     const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden, toggleClassName, dataTestId: toggleTestId, }, }) => ({
         title,
@@ -13,7 +13,7 @@ const Tabs = ({ TabList, className, containerClassName, size, defaultMatch, chil
     }));
     const tabs = tabsArray.filter((tab) => tab.props.id === selectedId || tab.props.keepMounted || keepMounted);
     return (React.createElement("div", { className: className },
-        React.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.createElement(TabList, { containerClassName: containerClassName, size: size, titles: titles, selectedId: selectedId, scrollable: scrollable, collapsedTabsIds: collapsedTabsIds, onChange: onChange, dataTestId: dataTestId, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll }),
         tabs.map((tab) => cloneElement(tab, { hidden: tab.props.id !== selectedId }))));
 };
 

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

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

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

@@ -3,22 +3,17 @@ import { PrimaryTabListMobile } from '../primary-tablist/Component.mobile.js';
 import { SecondaryTabListMobile } from '../secondary-tablist/Component.mobile.js';
 import { Tabs } from './Component.js';
 import 'classnames';
-import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';
-import '../../../../picker-button/modern/desktop';
-import '@alfalab/hooks';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
 import '../../index.module-cd918b29.js';
+import '../../mobile.module-823710bb.js';
 import '../../../../tag/modern';
 import '../../index.module-71e56d00.js';
 import '../primary-tablist/Component.js';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
 import '../secondary-tablist/Component.js';
 
 const views = {

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

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

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

@@ -2,26 +2,22 @@ import React from 'react';
 import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsive.js';
 import { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive.js';
 import { Tabs } from './Component.js';
-import '@alfalab/hooks';
+import '../../../../mq/modern';
 import 'classnames';
-import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';
-import '../../../../picker-button/modern/desktop';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
 import '../../index.module-cd918b29.js';
 import '../primary-tablist/Component.mobile.js';
+import '../../mobile.module-823710bb.js';
 import '../../../../tag/modern';
 import '../../index.module-71e56d00.js';
 import '../secondary-tablist/Component.mobile.js';
 import '../primary-tablist/Component.desktop.js';
 import '../primary-tablist/Component.js';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
 import '../secondary-tablist/Component.desktop.js';
 import '../secondary-tablist/Component.js';
 

package/tabs/modern/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/tabs/modern/desktop.js

@@ -1,24 +1,18 @@
 export { PrimaryTabListDesktop } from './components/primary-tablist/Component.desktop.js';
-export { ScrollableContainer } from './components/scrollable-container/Component.js';
 export { SecondaryTabListDesktop } from './components/secondary-tablist/Component.desktop.js';
 export { Tab } from './components/tab/Component.js';
 export { TabsDesktop } from './components/tabs/Component.desktop.js';
-export { useTabs } from './hooks/use-tabs.js';
-export { useCollapsibleElements } from './hooks/use-collapsible-elements.js';
 import 'react';
 import 'classnames';
-import '../../badge/modern';
 import '../../keyboard-focusable/modern';
-import '../../picker-button/modern/desktop';
-import '@alfalab/hooks';
-import '@juggle/resize-observer';
+import '../../shared/modern';
+import './components/scrollable-container/Component.js';
 import './components/title/Component.js';
 import 'compute-scroll-into-view';
 import './index.module-cd918b29.js';
 import '../../tag/modern';
 import './index.module-71e56d00.js';
 import './components/primary-tablist/Component.js';
-import './hooks/use-tablist-titles.js';
-import './synthetic-events.js';
+import './hooks/use-tabs.js';
 import './components/secondary-tablist/Component.js';
 import './components/tabs/Component.js';