@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.2

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

@@ -1,67 +1,66 @@
-import { useMemo } from 'react';
-import { useMatchMedia } from '../../../mq/cssm';
-import { useCollapsibleElements } from './use-collapsible-elements.js';
-import { useTabs } from './use-tabs.js';
-import '@juggle/resize-observer';
-import '@alfalab/hooks';
-import 'react-merge-refs';
-import '../../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const useTablistTitles = ({ titles = [], selectedId, collapsedTabsIds, breakpoint, onChange, defaultMatchMediaValue, }) => {
-    const { containerRef, addonRef, idsCollapsedElements } = useCollapsibleElements('[role=tab]', [titles, collapsedTabsIds]);
-    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
-    const tablistTitles = useMemo(() => {
-        const idsCollapsedTitles = [];
-        const idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsMq = require('../../../mq/cssm');
+var hooks_useCollapsibleElements = require('./use-collapsible-elements.js');
+var hooks_useTabs = require('./use-tabs.js');
+
+var useTablistTitles = function (_a) {
+    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 isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
+    var tablistTitles = React.useMemo(function () {
+        var idsCollapsedTitles = [];
+        var idsCollapsed = idsCollapsedElements.concat(collapsedTabsIds || []);
         if (isDesktop) {
-            const visibleTitles = titles.filter(({ id }) => !idsCollapsed.includes(String(id)));
-            const lastVisibleTitle = collapsedTabsIds
+            var visibleTitles = titles.filter(function (_a) {
+                var id = _a.id;
+                return !idsCollapsed.includes(String(id));
+            });
+            var lastVisibleTitle_1 = collapsedTabsIds
                 ? null
                 : visibleTitles[visibleTitles.length - 1];
-            idsCollapsed.forEach((id) => {
-                if (selectedId === id && lastVisibleTitle) {
-                    idsCollapsedTitles.push(String(lastVisibleTitle.id));
+            idsCollapsed.forEach(function (id) {
+                if (selectedId === id && lastVisibleTitle_1) {
+                    idsCollapsedTitles.push(String(lastVisibleTitle_1.id));
                 }
                 if (selectedId !== id) {
                     idsCollapsedTitles.push(id);
                 }
             });
         }
-        const titlesMapped = titles.map((title) => ({
-            ...title,
-            collapsed: idsCollapsedTitles.includes(String(title.id)),
-            selected: title.id === selectedId,
-        }));
-        if (collapsedTabsIds?.length) {
-            titlesMapped.sort((a, b) => {
-                const hasA = collapsedTabsIds.includes(String(a.id));
-                const hasB = collapsedTabsIds.includes(String(b.id));
+        var titlesMapped = titles.map(function (title) { return (tslib.__assign(tslib.__assign({}, title), { collapsed: idsCollapsedTitles.includes(String(title.id)), selected: title.id === selectedId })); });
+        if (collapsedTabsIds === null || collapsedTabsIds === void 0 ? void 0 : collapsedTabsIds.length) {
+            titlesMapped.sort(function (a, b) {
+                var hasA = collapsedTabsIds.includes(String(a.id));
+                var hasB = collapsedTabsIds.includes(String(b.id));
                 if (hasA === hasB) {
                     return 0;
                 }
                 return hasA ? 1 : -1;
             });
         }
-        return titlesMapped.sort((a, b) => {
+        return titlesMapped.sort(function (a, b) {
             if (a.collapsed === b.collapsed) {
                 return 0;
             }
             return a.collapsed ? 1 : -1;
         });
     }, [collapsedTabsIds, idsCollapsedElements, isDesktop, titles, selectedId]);
-    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
+    var _d = hooks_useTabs.useTabs({
         titles: tablistTitles,
-        selectedId,
-        onChange,
-    });
+        selectedId: selectedId,
+        onChange: onChange,
+    }), selectedTab = _d.selectedTab, focusedTab = _d.focusedTab, getTabListItemProps = _d.getTabListItemProps;
     return {
-        containerRef,
-        addonRef,
-        tablistTitles,
-        selectedTab,
-        focusedTab,
-        getTabListItemProps,
+        containerRef: containerRef,
+        addonRef: addonRef,
+        tablistTitles: tablistTitles,
+        selectedTab: selectedTab,
+        focusedTab: focusedTab,
+        getTabListItemProps: getTabListItemProps,
     };
 };
 
-export { useTablistTitles };
+exports.useTablistTitles = useTablistTitles;

package/tabs/cssm/hooks/use-tabs.js

@@ -1,31 +1,38 @@
-import { useState, useRef, useCallback } from 'react';
-import mergeRefs from 'react-merge-refs';
-import { getDataTestId } from '../../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-function useTabs({ titles = [], selectedId, onChange }) {
-    const [selectedTab, setSelectedTab] = useState(null);
-    const [focusedTab, setFocusedTab] = useState(null);
-    const itemRefs = useRef([]);
-    const handleItemRef = useCallback((node, item, index) => {
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var coreComponentsShared = require('../../../shared/cssm');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+
+function useTabs(_a) {
+    var _b = _a.titles, titles = _b === void 0 ? [] : _b, selectedId = _a.selectedId, onChange = _a.onChange;
+    var _c = React.useState(null), selectedTab = _c[0], setSelectedTab = _c[1];
+    var _d = React.useState(null), focusedTab = _d[0], setFocusedTab = _d[1];
+    var itemRefs = React.useRef([]);
+    var handleItemRef = React.useCallback(function (node, item, index) {
         if (node && item.id === selectedId)
             setSelectedTab(node);
         itemRefs.current[index] = node;
     }, [selectedId]);
-    const handleItemClick = useCallback((event, item) => {
+    var handleItemClick = React.useCallback(function (event, item) {
         if (onChange && item.id !== selectedId) {
             onChange(event, { selectedId: item.id });
         }
     }, [onChange, selectedId]);
-    const focusTab = useCallback((position) => {
-        const refs = itemRefs.current;
-        const tabAvailable = (ref) => ref && !ref.disabled;
-        if (refs.every((ref) => !tabAvailable(ref)))
+    var focusTab = React.useCallback(function (position) {
+        var refs = itemRefs.current;
+        var tabAvailable = function (ref) { return ref && !ref.disabled; };
+        if (refs.every(function (ref) { return !tabAvailable(ref); }))
             return;
-        let focusedTabIndex = refs.findIndex((node) => document.activeElement === node);
+        var focusedTabIndex = refs.findIndex(function (node) { return document.activeElement === node; });
         if (focusedTabIndex === -1) {
-            focusedTabIndex = refs.findIndex((node) => node === selectedTab);
+            focusedTabIndex = refs.findIndex(function (node) { return node === selectedTab; });
         }
-        let newFocusIndex;
+        var newFocusIndex;
         switch (position) {
             case 'prev':
                 newFocusIndex = focusedTabIndex === 0 ? refs.length - 1 : focusedTabIndex - 1;
@@ -40,14 +47,14 @@ function useTabs({ titles = [], selectedId, onChange }) {
                 newFocusIndex = refs.length - 1;
                 break;
         }
-        const shift = ['prev', 'end'].includes(position) ? -1 : 1;
+        var shift = ['prev', 'end'].includes(position) ? -1 : 1;
         while (!tabAvailable(refs[newFocusIndex])) {
             newFocusIndex = (refs.length + newFocusIndex + shift) % refs.length;
         }
         refs[newFocusIndex].focus();
         setFocusedTab(refs[newFocusIndex]);
     }, [selectedTab, itemRefs]);
-    const handleKeyDown = useCallback((event) => {
+    var handleKeyDown = React.useCallback(function (event) {
         switch (event.key) {
             case 'ArrowLeft':
                 focusTab('prev');
@@ -67,11 +74,11 @@ function useTabs({ titles = [], selectedId, onChange }) {
                 break;
         }
     }, [focusTab]);
-    const getTabListItemProps = (index, outerRef) => {
-        const item = titles[index];
-        const itemSelected = item.id === selectedId;
-        const refs = [
-            (node) => {
+    var getTabListItemProps = function (index, outerRef) {
+        var item = titles[index];
+        var itemSelected = item.id === selectedId;
+        var refs = [
+            function (node) {
                 // eslint-disable-next-line no-param-reassign
                 if (outerRef)
                     outerRef.current = node;
@@ -86,18 +93,18 @@ function useTabs({ titles = [], selectedId, onChange }) {
             tabIndex: itemSelected ? 0 : -1,
             'aria-selected': itemSelected,
             selected: itemSelected,
-            'data-test-id': getDataTestId(item.dataTestId, 'toggle'),
+            'data-test-id': coreComponentsShared.getDataTestId(item.dataTestId, 'toggle'),
             disabled: item.disabled,
-            ref: mergeRefs(refs),
+            ref: mergeRefs__default.default(refs),
             onKeyDown: handleKeyDown,
-            onClick: (event) => handleItemClick(event, item),
+            onClick: function (event) { return handleItemClick(event, item); },
         };
     };
     return {
-        getTabListItemProps,
-        selectedTab,
-        focusedTab,
+        getTabListItemProps: getTabListItemProps,
+        selectedTab: selectedTab,
+        focusedTab: focusedTab,
     };
 }
 
-export { useTabs };
+exports.useTabs = useTabs;

package/tabs/cssm/index.js

@@ -1,37 +1,13 @@
-export { PrimaryTabListResponsive } from './components/primary-tablist/Component.responsive.js';
-export { SecondaryTabListResponsive } from './components/secondary-tablist/Component.responsive.js';
-export { Tab } from './components/tab/Component.js';
-export { TabsResponsive as Tabs } from './components/tabs/Component.responsive.js';
-import 'react';
-import '../../mq/cssm';
-import './components/primary-tablist/Component.desktop.js';
-import './components/primary-tablist/Component.js';
-import '@juggle/resize-observer';
-import 'classnames';
-import '../../keyboard-focusable/cssm';
-import '../../shared/cssm';
-import './hooks/use-tabs.js';
-import 'react-merge-refs';
-import './components/scrollable-container/Component.js';
-import 'compute-scroll-into-view';
-import './components/scroll-controls/Component.js';
-import 'lodash.debounce';
-import '../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import './components/scroll-controls/utils.js';
-import './components/scroll-controls/index.module.css';
-import './components/scrollable-container/index.module.css';
-import './components/title/Component.js';
-import './components/primary-tablist/index.module.css';
-import './components/primary-tablist/Component.mobile.js';
-import './components/primary-tablist/mobile.module.css';
-import './components/secondary-tablist/Component.desktop.js';
-import '../../tag/cssm/desktop';
-import './components/secondary-tablist/Component.js';
-import './components/secondary-tablist/index.module.css';
-import './components/secondary-tablist/Component.mobile.js';
-import '../../tag/cssm/mobile';
-import './components/secondary-tablist/mobile.module.css';
-import './components/tab/index.module.css';
-import './components/tabs/Component.js';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_primaryTablist_Component_responsive = require('./components/primary-tablist/Component.responsive.js');
+var components_secondaryTablist_Component_responsive = require('./components/secondary-tablist/Component.responsive.js');
+var components_tab_Component = require('./components/tab/Component.js');
+var components_tabs_Component_responsive = require('./components/tabs/Component.responsive.js');
+
+
+
+exports.PrimaryTabListResponsive = components_primaryTablist_Component_responsive.PrimaryTabListResponsive;
+exports.SecondaryTabListResponsive = components_secondaryTablist_Component_responsive.SecondaryTabListResponsive;
+exports.Tab = components_tab_Component.Tab;
+exports.Tabs = components_tabs_Component_responsive.TabsResponsive;

package/tabs/cssm/mobile/index.js

@@ -1,31 +1,13 @@
-export { PrimaryTabListMobile } from '../components/primary-tablist/Component.mobile.js';
-export { SecondaryTabListMobile } from '../components/secondary-tablist/Component.mobile.js';
-export { Tab } from '../components/tab/Component.js';
-export { TabsMobile } from '../components/tabs/Component.mobile.js';
-import 'react';
-import '../components/primary-tablist/Component.js';
-import '@juggle/resize-observer';
-import 'classnames';
-import '../../../keyboard-focusable/cssm';
-import '../../../shared/cssm';
-import '../hooks/use-tabs.js';
-import 'react-merge-refs';
-import '../components/scrollable-container/Component.js';
-import 'compute-scroll-into-view';
-import '../components/scroll-controls/Component.js';
-import 'lodash.debounce';
-import '../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import '../components/scroll-controls/utils.js';
-import '../components/scroll-controls/index.module.css';
-import '../components/scrollable-container/index.module.css';
-import '../components/title/Component.js';
-import '../components/primary-tablist/index.module.css';
-import '../components/primary-tablist/mobile.module.css';
-import '../../../tag/cssm/mobile';
-import '../components/secondary-tablist/Component.js';
-import '../components/secondary-tablist/index.module.css';
-import '../components/secondary-tablist/mobile.module.css';
-import '../components/tab/index.module.css';
-import '../components/tabs/Component.js';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_primaryTablist_Component_mobile = require('../components/primary-tablist/Component.mobile.js');
+var components_secondaryTablist_Component_mobile = require('../components/secondary-tablist/Component.mobile.js');
+var components_tab_Component = require('../components/tab/Component.js');
+var components_tabs_Component_mobile = require('../components/tabs/Component.mobile.js');
+
+
+
+exports.PrimaryTabListMobile = components_primaryTablist_Component_mobile.PrimaryTabListMobile;
+exports.SecondaryTabListMobile = components_secondaryTablist_Component_mobile.SecondaryTabListMobile;
+exports.Tab = components_tab_Component.Tab;
+exports.TabsMobile = components_tabs_Component_mobile.TabsMobile;

package/tabs/cssm/shared/index.js

@@ -1,18 +1,11 @@
-export { ScrollableContainer } from '../components/scrollable-container/Component.js';
-export { useTabs } from '../hooks/use-tabs.js';
-export { useCollapsibleElements } from '../hooks/use-collapsible-elements.js';
-import 'react';
-import 'classnames';
-import 'compute-scroll-into-view';
-import '../components/scroll-controls/Component.js';
-import 'lodash.debounce';
-import '../../../icon-button/cssm';
-import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
-import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
-import '../components/scroll-controls/utils.js';
-import '../components/scroll-controls/index.module.css';
-import '../components/scrollable-container/index.module.css';
-import 'react-merge-refs';
-import '../../../shared/cssm';
-import '@juggle/resize-observer';
-import '@alfalab/hooks';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_scrollableContainer_Component = require('../components/scrollable-container/Component.js');
+var hooks_useTabs = require('../hooks/use-tabs.js');
+var hooks_useCollapsibleElements = require('../hooks/use-collapsible-elements.js');
+
+
+
+exports.ScrollableContainer = components_scrollableContainer_Component.ScrollableContainer;
+exports.useTabs = hooks_useTabs.useTabs;
+exports.useCollapsibleElements = hooks_useCollapsibleElements.useCollapsibleElements;

package/tabs/cssm/synthetic-events.js

@@ -1,11 +1,15 @@
-const createSyntheticEvent = (event) => {
-    let isDefaultPrevented = false;
-    let isPropagationStopped = false;
-    const preventDefault = () => {
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+
+var createSyntheticEvent = function (event) {
+    var isDefaultPrevented = false;
+    var isPropagationStopped = false;
+    var preventDefault = function () {
         isDefaultPrevented = true;
         event.preventDefault();
     };
-    const stopPropagation = () => {
+    var stopPropagation = function () {
         isPropagationStopped = true;
         event.stopPropagation();
     };
@@ -18,44 +22,24 @@ const createSyntheticEvent = (event) => {
         defaultPrevented: event.defaultPrevented,
         eventPhase: event.eventPhase,
         isTrusted: event.isTrusted,
-        preventDefault,
-        isDefaultPrevented: () => isDefaultPrevented,
-        stopPropagation,
-        isPropagationStopped: () => isPropagationStopped,
-        persist: () => { },
+        preventDefault: preventDefault,
+        isDefaultPrevented: function () { return isDefaultPrevented; },
+        stopPropagation: stopPropagation,
+        isPropagationStopped: function () { return isPropagationStopped; },
+        persist: function () { },
         timeStamp: event.timeStamp,
         type: event.type,
     };
 };
-const createUIEvent = (event) => ({
-    ...createSyntheticEvent(event),
-    detail: 0,
-    view: {
+var createUIEvent = function (event) { return (tslib.__assign(tslib.__assign({}, createSyntheticEvent(event)), { detail: 0, view: {
         styleMedia: {
             type: '',
-            matchMedium: () => false,
+            matchMedium: function () { return false; },
         },
-        document,
-    },
-});
-const createSyntheticMouseEvent = (event) => ({
-    ...createUIEvent(event),
-    altKey: event.altKey,
-    button: event.button,
-    buttons: event.buttons,
-    clientX: event.clientX,
-    clientY: event.clientY,
-    ctrlKey: event.ctrlKey,
-    getModifierState: event.getModifierState,
-    metaKey: event.metaKey,
-    movementX: event.movementX,
-    movementY: event.movementY,
-    pageX: event.pageX,
-    pageY: event.pageY,
-    relatedTarget: event.relatedTarget,
-    screenX: event.screenX,
-    screenY: event.screenY,
-    shiftKey: event.shiftKey,
-});
+        document: document,
+    } })); };
+var createSyntheticMouseEvent = function (event) { return (tslib.__assign(tslib.__assign({}, createUIEvent(event)), { altKey: event.altKey, button: event.button, buttons: event.buttons, clientX: event.clientX, clientY: event.clientY, ctrlKey: event.ctrlKey, getModifierState: event.getModifierState, metaKey: event.metaKey, movementX: event.movementX, movementY: event.movementY, pageX: event.pageX, pageY: event.pageY, relatedTarget: event.relatedTarget, screenX: event.screenX, screenY: event.screenY, shiftKey: event.shiftKey })); };
 
-export { createSyntheticEvent, createSyntheticMouseEvent, createUIEvent };
+exports.createSyntheticEvent = createSyntheticEvent;
+exports.createSyntheticMouseEvent = createSyntheticMouseEvent;
+exports.createUIEvent = createUIEvent;

package/tabs/esm/collapsible/index.js

@@ -7,6 +7,7 @@ import 'classnames';
 import '../../../badge/esm';
 import '../../../keyboard-focusable/esm';
 import '../../../picker-button/esm/desktop';
+import '../../../shared/esm';
 import '../hooks/use-tablist-titles.js';
 import '../../../mq/esm';
 import '../hooks/use-collapsible-elements.js';
@@ -14,8 +15,7 @@ import '@juggle/resize-observer';
 import '@alfalab/hooks';
 import '../hooks/use-tabs.js';
 import 'react-merge-refs';
-import '../../../shared/esm';
 import '../synthetic-events.js';
 import '../components/title/Component.js';
-import '../index.module-23153d19.js';
+import '../index.module-9dc5e1af.js';
 import '../components/tabs/Component.js';

package/tabs/esm/components/primary-tablist/Component.collapsible.js

@@ -4,20 +4,20 @@ import cn from 'classnames';
 import { Badge } from '../../../../badge/esm';
 import { KeyboardFocusable } from '../../../../keyboard-focusable/esm';
 import { PickerButtonDesktop } from '../../../../picker-button/esm/desktop';
+import { getComponentBreakpoint } from '../../../../shared/esm';
 import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
 import { createSyntheticMouseEvent } from '../../synthetic-events.js';
 import { Title } from '../title/Component.js';
-import { s as styles } from '../../index.module-23153d19.js';
+import { s as styles } from '../../index.module-9dc5e1af.js';
 import '../../../../mq/esm';
 import '../../hooks/use-collapsible-elements.js';
 import '@juggle/resize-observer';
 import '@alfalab/hooks';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
-import '../../../../shared/esm';
 
 var CollapsiblePrimaryTabList = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? 1024 : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
+    var _b = _a.size, size = _b === void 0 ? 'm' : _b, className = _a.className, containerClassName = _a.containerClassName, _c = _a.titles, titles = _c === void 0 ? [] : _c, _d = _a.selectedId, selectedId = _d === void 0 ? titles.length ? titles[0].id : undefined : _d, collapsedTabsIds = _a.collapsedTabsIds, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, _e = _a.breakpoint, breakpoint = _e === void 0 ? getComponentBreakpoint() : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
     var lineRef = useRef(null);
     var _f = useTablistTitles({
         titles: titles,

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

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles } from '../../index.module-23153d19.js';
+import { s as styles } from '../../index.module-9dc5e1af.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/esm';

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

@@ -1,7 +1,7 @@
 import { __assign } from 'tslib';
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles$1 } from '../../index.module-23153d19.js';
+import { s as styles$1 } from '../../index.module-9dc5e1af.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/esm';

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

@@ -1,13 +1,13 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { useMatchMedia } from '../../../../mq/esm';
+import { getComponentBreakpoint } from '../../../../shared/esm';
 import { PrimaryTabListDesktop } from './Component.desktop.js';
 import { PrimaryTabListMobile } from './Component.mobile.js';
 import './Component.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/esm';
-import '../../../../shared/esm';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
 import '../scrollable-container/Component.js';
@@ -19,10 +19,10 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-23153d19.js';
+import '../../index.module-9dc5e1af.js';
 
 var PrimaryTabListResponsive = function (_a) {
-    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
+    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = __rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
     var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React.createElement(PrimaryTabListDesktop, __assign({ breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue }, restProps))) : (React.createElement(PrimaryTabListMobile, __assign({ breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll }, restProps)));
 };

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

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { TagDesktop } from '../../../../tag/esm/desktop';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-05b6e85e.js';
+import { c as commonStyles } from '../../index.module-9817743e.js';
 import 'classnames';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';

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

@@ -3,7 +3,7 @@ import React from 'react';
 import cn from 'classnames';
 import { TagMobile } from '../../../../tag/esm/mobile';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-05b6e85e.js';
+import { c as commonStyles } from '../../index.module-9817743e.js';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
 import '../../../../shared/esm';

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

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { useMatchMedia } from '../../../../mq/esm';
+import { getComponentBreakpoint } from '../../../../shared/esm';
 import { SecondaryTabListDesktop } from './Component.desktop.js';
 import { SecondaryTabListMobile } from './Component.mobile.js';
 import '../../../../tag/esm/desktop';
@@ -8,7 +9,6 @@ import './Component.js';
 import 'classnames';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
-import '../../../../shared/esm';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
@@ -17,11 +17,11 @@ import '../../../../icon-button/esm';
 import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
-import '../../index.module-05b6e85e.js';
+import '../../index.module-9817743e.js';
 import '../../../../tag/esm/mobile';
 
 var SecondaryTabListResponsive = function (_a) {
-    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
+    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
     var isDesktop = useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React.createElement(SecondaryTabListDesktop, __assign({}, restProps))) : (React.createElement(SecondaryTabListMobile, __assign({ fullWidthScroll: fullWidthScroll }, restProps)));
 };

package/tabs/esm/components/tabs/Component.collapsible.js

@@ -6,6 +6,7 @@ import 'classnames';
 import '../../../../badge/esm';
 import '../../../../keyboard-focusable/esm';
 import '../../../../picker-button/esm/desktop';
+import '../../../../shared/esm';
 import '../../hooks/use-tablist-titles.js';
 import '../../../../mq/esm';
 import '../../hooks/use-collapsible-elements.js';
@@ -13,10 +14,9 @@ import '@juggle/resize-observer';
 import '@alfalab/hooks';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
-import '../../../../shared/esm';
 import '../../synthetic-events.js';
 import '../title/Component.js';
-import '../../index.module-23153d19.js';
+import '../../index.module-9dc5e1af.js';
 
 var TabsCollapsible = function (_a) {
     var restProps = __rest(_a, []);

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

@@ -19,10 +19,10 @@ import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
 import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 import '../title/Component.js';
-import '../../index.module-23153d19.js';
+import '../../index.module-9dc5e1af.js';
 import '../../../../tag/esm/desktop';
 import '../secondary-tablist/Component.js';
-import '../../index.module-05b6e85e.js';
+import '../../index.module-9817743e.js';
 
 var views = {
     primary: PrimaryTabListDesktop,

package/tabs/esm/components/tabs/Component.js

@@ -1,7 +1,8 @@
 import React, { cloneElement } from 'react';
+import { getComponentBreakpoint } from '../../../../shared/esm';
 
 var Tabs = function (_a) {
-    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, tagShape = _a.tagShape, tagView = _a.tagView, textStyle = _a.textStyle, style = _a.style;
+    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 ? getComponentBreakpoint() : _d, tagShape = _a.tagShape, tagView = _a.tagView, textStyle = _a.textStyle, style = _a.style;
     var tabsArray = React.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, toggleRef = _b.toggleRef;