@alfalab/core-components 46.0.0-beta.7 → 46.0.0-beta.8

package/status/modern/index.css

@@ -2,7 +2,6 @@
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-700: #898991;
-    --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
     --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
     --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
     --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -31,12 +30,6 @@
     --color-light-decorative-muted-alt-orange: #fde6c8;
     --color-light-decorative-muted-alt-red: #ffdfdf;
     --color-light-decorative-muted-alt-teal: #c8f1f3;
-    --color-light-decorative-muted-blue: #e4f0ff;
-    --color-light-decorative-muted-green: #dff8e5;
-    --color-light-decorative-muted-indigo: #eeedff;
-    --color-light-decorative-muted-orange: #ffefd9;
-    --color-light-decorative-muted-red: #ffebeb;
-    --color-light-decorative-muted-teal: #daf7f8;
     --color-light-decorative-orange: #fa9313;
     --color-light-decorative-red: #fe5e48;
     --color-light-decorative-teal: #09b9be;
@@ -68,62 +61,41 @@
         word-break: break-all;
     } .status__component_1keqd:empty {
         padding: 0;
-    } .status__muted-alt_1keqd.status__green_1keqd {
-            background: var(--color-light-decorative-muted-alt-green);
-            color: var(--color-light-decorative-text-green);
-        } .status__muted-alt_1keqd.status__orange_1keqd {
-            background: var(--color-light-decorative-muted-alt-orange);
-            color: var(--color-light-decorative-text-orange);
-        } .status__muted-alt_1keqd.status__red_1keqd {
-            background: var(--color-light-decorative-muted-alt-red);
-            color: var(--color-light-decorative-text-red);
-        } .status__muted-alt_1keqd.status__blue_1keqd {
-            background: var(--color-light-decorative-muted-alt-blue);
-            color: var(--color-light-decorative-text-blue);
-        } .status__muted-alt_1keqd.status__teal_1keqd {
-            background: var(--color-light-decorative-muted-alt-teal);
-            color: var(--color-light-decorative-text-teal);
-        } .status__muted-alt_1keqd.status__grey_1keqd {
+    } .status__soft_1keqd.status__green_1keqd {
+        background: var(--color-light-decorative-muted-alt-green);
+        color: var(--color-light-decorative-text-green);
+    } .status__soft_1keqd.status__orange_1keqd {
+        background: var(--color-light-decorative-muted-alt-orange);
+        color: var(--color-light-decorative-text-orange);
+    } .status__soft_1keqd.status__red_1keqd {
+        background: var(--color-light-decorative-muted-alt-red);
+        color: var(--color-light-decorative-text-red);
+    } .status__soft_1keqd.status__blue_1keqd {
+        background: var(--color-light-decorative-muted-alt-blue);
+        color: var(--color-light-decorative-text-blue);
+    } .status__soft_1keqd.status__grey_1keqd {
         background: var(--color-light-neutral-translucent-300);
         color: var(--color-light-text-secondary);
-    } .status__muted-alt_1keqd.status__purple_1keqd {
+    } .status__soft_1keqd.status__teal_1keqd {
+        background: var(--color-light-decorative-muted-alt-teal);
+        color: var(--color-light-decorative-text-teal);
+    } .status__soft_1keqd.status__purple_1keqd {
         background: var(--color-light-decorative-muted-alt-indigo);
         color: var(--color-light-decorative-text-indigo);
     } .status__contrast_1keqd {
     color: var(--color-light-text-primary-inverted)
 } .status__contrast_1keqd.status__green_1keqd {
-            background: var(--color-light-decorative-green);
-        } .status__contrast_1keqd.status__orange_1keqd {
-            background: var(--color-light-decorative-orange);
-        } .status__contrast_1keqd.status__red_1keqd {
-            background: var(--color-light-decorative-red);
-        } .status__contrast_1keqd.status__blue_1keqd {
-            background: var(--color-light-decorative-blue);
-        } .status__contrast_1keqd.status__teal_1keqd {
-            background: var(--color-light-decorative-teal);
-        } .status__contrast_1keqd.status__grey_1keqd {
+        background: var(--color-light-decorative-green);
+    } .status__contrast_1keqd.status__orange_1keqd {
+        background: var(--color-light-decorative-orange);
+    } .status__contrast_1keqd.status__red_1keqd {
+        background: var(--color-light-decorative-red);
+    } .status__contrast_1keqd.status__blue_1keqd {
+        background: var(--color-light-decorative-blue);
+    } .status__contrast_1keqd.status__grey_1keqd {
         background: var(--color-light-neutral-700);
+    } .status__contrast_1keqd.status__teal_1keqd {
+        background: var(--color-light-decorative-teal);
     } .status__contrast_1keqd.status__purple_1keqd {
         background: var(--color-light-decorative-indigo);
-    } .status__muted_1keqd.status__green_1keqd {
-            background: var(--color-light-decorative-muted-green);
-            color: var(--color-light-decorative-text-green);
-        } .status__muted_1keqd.status__orange_1keqd {
-            background: var(--color-light-decorative-muted-orange);
-            color: var(--color-light-decorative-text-orange);
-        } .status__muted_1keqd.status__red_1keqd {
-            background: var(--color-light-decorative-muted-red);
-            color: var(--color-light-decorative-text-red);
-        } .status__muted_1keqd.status__blue_1keqd {
-            background: var(--color-light-decorative-muted-blue);
-            color: var(--color-light-decorative-text-blue);
-        } .status__muted_1keqd.status__teal_1keqd {
-            background: var(--color-light-decorative-muted-teal);
-            color: var(--color-light-decorative-text-teal);
-        } .status__muted_1keqd.status__grey_1keqd {
-        background: var(--color-light-neutral-translucent-200);
-        color: var(--color-light-text-secondary);
-    } .status__muted_1keqd.status__purple_1keqd {
-        background: var(--color-light-decorative-muted-indigo);
-        color: var(--color-light-decorative-text-indigo);
     }

package/system-message/Components.responsive.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SystemMessageResponsiveComponent = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var getDefaultValue = function () { return (coreComponentsShared.isClient() ? window.matchMedia(query).matches : false); };
     var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];

package/system-message/cssm/Components.responsive.js

@@ -12,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SystemMessageResponsiveComponent = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = tslib.__rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var getDefaultValue = function () { return (coreComponentsShared.isClient() ? window.matchMedia(query).matches : false); };
     var isDesktop = coreComponentsMq.useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];

package/system-message/esm/Components.responsive.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { useMatchMedia } from '../../mq/esm';
-import { getComponentBreakpoint, isClient } from '../../shared/esm';
+import { isClient } from '../../shared/esm';
 import { SystemMessage } from './Component.js';
 import { createCompound } from './utils.js';
 import 'classnames';
@@ -13,7 +13,7 @@ import './components/subtitle/Component.js';
 import './components/title/Component.js';
 
 var SystemMessageResponsiveComponent = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, defaultMatchMediaValue = _a.defaultMatchMediaValue, children = _a.children, restProps = __rest(_a, ["breakpoint", "defaultMatchMediaValue", "children"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var getDefaultValue = function () { return (isClient() ? window.matchMedia(query).matches : false); };
     var isDesktop = useMatchMedia(query, defaultMatchMediaValue !== null && defaultMatchMediaValue !== void 0 ? defaultMatchMediaValue : getDefaultValue)[0];

package/system-message/modern/Components.responsive.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useMatchMedia } from '../../mq/modern';
-import { getComponentBreakpoint, isClient } from '../../shared/modern';
+import { isClient } from '../../shared/modern';
 import { SystemMessage } from './Component.js';
 import { createCompound } from './utils.js';
 import 'classnames';
@@ -11,7 +11,7 @@ import './components/graphic/Component.js';
 import './components/subtitle/Component.js';
 import './components/title/Component.js';
 
-const SystemMessageResponsiveComponent = ({ breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, children, ...restProps }) => {
+const SystemMessageResponsiveComponent = ({ breakpoint = 1024, defaultMatchMediaValue, children, ...restProps }) => {
     const query = `(min-width: ${breakpoint}px)`;
     const getDefaultValue = () => (isClient() ? window.matchMedia(query).matches : false);
     const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue ?? getDefaultValue);

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

@@ -6,7 +6,6 @@ var cn = require('classnames');
 var coreComponentsBadge = require('../../../badge');
 var coreComponentsKeyboardFocusable = require('../../../keyboard-focusable');
 var desktop = require('../../../picker-button/desktop');
-var coreComponentsShared = require('../../../shared');
 var hooks_useTablistTitles = require('../../hooks/use-tablist-titles.js');
 var syntheticEvents = require('../../synthetic-events.js');
 var components_title_Component = require('../title/Component.js');
@@ -18,7 +17,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 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 ? coreComponentsShared.getComponentBreakpoint() : _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 ? 1024 : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
     var lineRef = React.useRef(null);
     var _f = hooks_useTablistTitles.useTablistTitles({
         titles: titles,

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../../mq');
-var coreComponentsShared = require('../../../shared');
 var components_primaryTablist_Component_desktop = require('./Component.desktop.js');
 var components_primaryTablist_Component_mobile = require('./Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var PrimaryTabListResponsive = function (_a) {
-    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
+    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(components_primaryTablist_Component_desktop.PrimaryTabListDesktop, tslib.__assign({ breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue }, restProps))) : (React__default.default.createElement(components_primaryTablist_Component_mobile.PrimaryTabListMobile, tslib.__assign({ breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll }, restProps)));
 };

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../../mq');
-var coreComponentsShared = require('../../../shared');
 var components_secondaryTablist_Component_desktop = require('./Component.desktop.js');
 var components_secondaryTablist_Component_mobile = require('./Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SecondaryTabListResponsive = function (_a) {
-    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
+    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(components_secondaryTablist_Component_desktop.SecondaryTabListDesktop, tslib.__assign({}, restProps))) : (React__default.default.createElement(components_secondaryTablist_Component_mobile.SecondaryTabListMobile, tslib.__assign({ fullWidthScroll: fullWidthScroll }, restProps)));
 };

package/tabs/components/tabs/Component.js

@@ -1,14 +1,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var coreComponentsShared = require('../../../shared');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 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 ? coreComponentsShared.getComponentBreakpoint() : _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 ? 1024 : _d, tagShape = _a.tagShape, tagView = _a.tagView, textStyle = _a.textStyle, style = _a.style;
     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, toggleRef = _b.toggleRef;

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

@@ -6,7 +6,6 @@ var cn = require('classnames');
 var coreComponentsBadge = require('../../../../badge/cssm');
 var coreComponentsKeyboardFocusable = require('../../../../keyboard-focusable/cssm');
 var desktop = require('../../../../picker-button/cssm/desktop');
-var coreComponentsShared = require('../../../../shared/cssm');
 var hooks_useTablistTitles = require('../../hooks/use-tablist-titles.js');
 var syntheticEvents = require('../../synthetic-events.js');
 var components_title_Component = require('../title/Component.js');
@@ -19,7 +18,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 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 ? coreComponentsShared.getComponentBreakpoint() : _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 ? 1024 : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
     var lineRef = React.useRef(null);
     var _f = hooks_useTablistTitles.useTablistTitles({
         titles: titles,

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../../../mq/cssm');
-var coreComponentsShared = require('../../../../shared/cssm');
 var components_primaryTablist_Component_desktop = require('./Component.desktop.js');
 var components_primaryTablist_Component_mobile = require('./Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var PrimaryTabListResponsive = function (_a) {
-    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
+    var size = _a.size, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, fullWidthScroll = _a.fullWidthScroll, defaultMatchMediaValue = _a.defaultMatchMediaValue, restProps = tslib.__rest(_a, ["size", "breakpoint", "fullWidthScroll", "defaultMatchMediaValue"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(components_primaryTablist_Component_desktop.PrimaryTabListDesktop, tslib.__assign({ breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue }, restProps))) : (React__default.default.createElement(components_primaryTablist_Component_mobile.PrimaryTabListMobile, tslib.__assign({ breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll }, restProps)));
 };

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../../../../mq/cssm');
-var coreComponentsShared = require('../../../../shared/cssm');
 var components_secondaryTablist_Component_desktop = require('./Component.desktop.js');
 var components_secondaryTablist_Component_mobile = require('./Component.mobile.js');
 
@@ -12,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var SecondaryTabListResponsive = function (_a) {
-    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
+    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
     var isDesktop = coreComponentsMq.useMatchMedia("(min-width: ".concat(breakpoint, "px)"), defaultMatchMediaValue)[0];
     return isDesktop ? (React__default.default.createElement(components_secondaryTablist_Component_desktop.SecondaryTabListDesktop, tslib.__assign({}, restProps))) : (React__default.default.createElement(components_secondaryTablist_Component_mobile.SecondaryTabListMobile, tslib.__assign({ fullWidthScroll: fullWidthScroll }, restProps)));
 };

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

@@ -1,14 +1,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var coreComponentsShared = require('../../../../shared/cssm');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 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 ? coreComponentsShared.getComponentBreakpoint() : _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 ? 1024 : _d, tagShape = _a.tagShape, tagView = _a.tagView, textStyle = _a.textStyle, style = _a.style;
     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, toggleRef = _b.toggleRef;

package/tabs/esm/collapsible/index.js

@@ -7,7 +7,6 @@ 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';
@@ -15,6 +14,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-ba7b2cb2.js';

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

@@ -4,7 +4,6 @@ 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';
@@ -15,9 +14,10 @@ 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 ? getComponentBreakpoint() : _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 ? 1024 : _e, defaultMatchMediaValue = _a.defaultMatchMediaValue, textStyle = _a.textStyle;
     var lineRef = useRef(null);
     var _f = useTablistTitles({
         titles: titles,

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';
@@ -22,7 +22,7 @@ import '../title/Component.js';
 import '../../index.module-ba7b2cb2.js';
 
 var PrimaryTabListResponsive = function (_a) {
-    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 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 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.responsive.js

@@ -1,7 +1,6 @@
 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';
@@ -9,6 +8,7 @@ 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';
@@ -21,7 +21,7 @@ import '../../index.module-5a0e55b4.js';
 import '../../../../tag/esm/mobile';
 
 var SecondaryTabListResponsive = function (_a) {
-    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
+    var defaultMatchMediaValue = _a.defaultMatchMediaValue, fullWidthScroll = _a.fullWidthScroll, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _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,7 +6,6 @@ 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,6 +13,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 '../title/Component.js';
 import '../../index.module-ba7b2cb2.js';

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

@@ -1,8 +1,7 @@
 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 ? getComponentBreakpoint() : _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 ? 1024 : _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;

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

@@ -4,12 +4,12 @@ import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsiv
 import { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive.js';
 import { Tabs } from './Component.js';
 import '../../../../mq/esm';
-import '../../../../shared/esm';
 import '../primary-tablist/Component.desktop.js';
 import '../primary-tablist/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';

package/tabs/esm/index.js

@@ -5,12 +5,12 @@ export { TabsResponsive as Tabs } from './components/tabs/Component.responsive.j
 import 'tslib';
 import 'react';
 import '../../mq/esm';
-import '../../shared/esm';
 import './components/primary-tablist/Component.desktop.js';
 import './components/primary-tablist/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 './components/scrollable-container/Component.js';

package/tabs/modern/collapsible/index.js

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

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

@@ -3,7 +3,6 @@ import cn from 'classnames';
 import { Badge } from '../../../../badge/modern';
 import { KeyboardFocusable } from '../../../../keyboard-focusable/modern';
 import { PickerButtonDesktop } from '../../../../picker-button/modern/desktop';
-import { getComponentBreakpoint } from '../../../../shared/modern';
 import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
 import { createSyntheticMouseEvent } from '../../synthetic-events.js';
 import { Title } from '../title/Component.js';
@@ -14,8 +13,9 @@ import '@juggle/resize-observer';
 import '@alfalab/hooks';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
+import '../../../../shared/modern';
 
-const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = getComponentBreakpoint(), defaultMatchMediaValue, textStyle, }) => {
+const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = 1024, defaultMatchMediaValue, textStyle, }) => {
     const lineRef = useRef(null);
     const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } = useTablistTitles({
         titles,

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useMatchMedia } from '../../../../mq/modern';
-import { getComponentBreakpoint } from '../../../../shared/modern';
 import { PrimaryTabListDesktop } from './Component.desktop.js';
 import { PrimaryTabListMobile } from './Component.mobile.js';
 import './Component.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/modern';
+import '../../../../shared/modern';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
 import '../scrollable-container/Component.js';
@@ -20,7 +20,7 @@ import '../scroll-controls/utils.js';
 import '../title/Component.js';
 import '../../index.module-ff97782f.js';
 
-const PrimaryTabListResponsive = ({ size, breakpoint = getComponentBreakpoint(), fullWidthScroll, defaultMatchMediaValue, ...restProps }) => {
+const PrimaryTabListResponsive = ({ size, breakpoint = 1024, 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 }));
 };

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useMatchMedia } from '../../../../mq/modern';
-import { getComponentBreakpoint } from '../../../../shared/modern';
 import { SecondaryTabListDesktop } from './Component.desktop.js';
 import { SecondaryTabListMobile } from './Component.mobile.js';
 import '../../../../tag/modern/desktop';
@@ -8,6 +7,7 @@ import './Component.js';
 import 'classnames';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
@@ -19,7 +19,7 @@ import '../scroll-controls/utils.js';
 import '../../index.module-a08c8cf9.js';
 import '../../../../tag/modern/mobile';
 
-const SecondaryTabListResponsive = ({ defaultMatchMediaValue, fullWidthScroll, breakpoint = getComponentBreakpoint(), ...restProps }) => {
+const SecondaryTabListResponsive = ({ defaultMatchMediaValue, fullWidthScroll, breakpoint = 1024, ...restProps }) => {
     const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
     return isDesktop ? (React.createElement(SecondaryTabListDesktop, { ...restProps })) : (React.createElement(SecondaryTabListMobile, { fullWidthScroll: fullWidthScroll, ...restProps }));
 };

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

@@ -5,7 +5,6 @@ import 'classnames';
 import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';
 import '../../../../picker-button/modern/desktop';
-import '../../../../shared/modern';
 import '../../hooks/use-tablist-titles.js';
 import '../../../../mq/modern';
 import '../../hooks/use-collapsible-elements.js';
@@ -13,6 +12,7 @@ import '@juggle/resize-observer';
 import '@alfalab/hooks';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
+import '../../../../shared/modern';
 import '../../synthetic-events.js';
 import '../title/Component.js';
 import '../../index.module-ff97782f.js';

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

@@ -1,7 +1,6 @@
 import React, { cloneElement } from 'react';
-import { getComponentBreakpoint } from '../../../../shared/modern';
 
-const Tabs = ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, breakpoint = getComponentBreakpoint(), tagShape, tagView, textStyle, style, }) => {
+const Tabs = ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, breakpoint = 1024, tagShape, tagView, textStyle, style, }) => {
     const tabsArray = React.Children.toArray(children);
     const titles = tabsArray.map(({ props: { title, id, rightAddons, disabled, hidden, toggleClassName, dataTestId: toggleTestId, toggleRef, }, }) => ({
         title,

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

@@ -3,12 +3,12 @@ import { PrimaryTabListResponsive } from '../primary-tablist/Component.responsiv
 import { SecondaryTabListResponsive } from '../secondary-tablist/Component.responsive.js';
 import { Tabs } from './Component.js';
 import '../../../../mq/modern';
-import '../../../../shared/modern';
 import '../primary-tablist/Component.desktop.js';
 import '../primary-tablist/Component.js';
 import '@juggle/resize-observer';
 import 'classnames';
 import '../../../../keyboard-focusable/modern';
+import '../../../../shared/modern';
 import '../../hooks/use-tabs.js';
 import 'react-merge-refs';
 import '../scrollable-container/Component.js';