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

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

@@ -3,6 +3,7 @@ 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');
 
@@ -11,7 +12,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 ? 1024 : _b, restProps = tslib.__rest(_a, ["defaultMatchMediaValue", "fullWidthScroll", "breakpoint"]);
+    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 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,13 +1,14 @@
 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 ? 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 ? coreComponentsShared.getComponentBreakpoint() : _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,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,7 +15,6 @@ 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-9dc5e1af.js';

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

@@ -4,6 +4,7 @@ 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';
@@ -14,10 +15,9 @@ 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.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-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.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';
@@ -21,7 +21,7 @@ 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,7 +14,6 @@ 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-9dc5e1af.js';

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;

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

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

@@ -3,6 +3,7 @@ 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';
@@ -13,9 +14,8 @@ 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 = 1024, defaultMatchMediaValue, textStyle, }) => {
+const CollapsiblePrimaryTabList = ({ size = 'm', className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = getComponentBreakpoint(), 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-17dbd674.js';
 
-const PrimaryTabListResponsive = ({ size, breakpoint = 1024, fullWidthScroll, defaultMatchMediaValue, ...restProps }) => {
+const PrimaryTabListResponsive = ({ size, breakpoint = getComponentBreakpoint(), 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,5 +1,6 @@
 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';
@@ -7,7 +8,6 @@ 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-3bc1e97c.js';
 import '../../../../tag/modern/mobile';
 
-const SecondaryTabListResponsive = ({ defaultMatchMediaValue, fullWidthScroll, breakpoint = 1024, ...restProps }) => {
+const SecondaryTabListResponsive = ({ defaultMatchMediaValue, fullWidthScroll, breakpoint = getComponentBreakpoint(), ...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,6 +5,7 @@ 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';
@@ -12,7 +13,6 @@ 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-17dbd674.js';

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

@@ -1,6 +1,7 @@
 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 = 1024, tagShape, tagView, textStyle, style, }) => {
+const Tabs = ({ TabList, className, containerClassName, size, defaultMatchMediaValue, children, selectedId, scrollable, collapsedTabsIds, fullWidthScroll = false, keepMounted = false, dataTestId, onChange, breakpoint = getComponentBreakpoint(), 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';

package/tabs/modern/index.js

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

package/tag/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
+var coreComponentsShared = require('../shared');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Tag = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.TagDesktop : mobile_Component_mobile.TagMobile;

package/tag/components/base-tag/Component.d.ts

@@ -94,7 +94,7 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Размер компонента
      * @description xxs, xs, s, m, l, xl deprecated, используйте вместо них 32, 40, 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xl" | "xxs" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Дочерние элементы.
      */

package/tag/cssm/Component.responsive.js

@@ -3,6 +3,7 @@ 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 desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Tag = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.TagDesktop : mobile_Component_mobile.TagMobile;

package/tag/cssm/components/base-tag/Component.d.ts

@@ -94,7 +94,7 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Размер компонента
      * @description xxs, xs, s, m, l, xl deprecated, используйте вместо них 32, 40, 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xl" | "xxs" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Дочерние элементы.
      */

package/tag/esm/Component.responsive.js

@@ -1,6 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/esm';
+import { getComponentBreakpoint } from '../../shared/esm';
 import { TagDesktop } from './desktop/Component.desktop.js';
 import { TagMobile } from './mobile/Component.mobile.js';
 import './components/base-tag/Component.js';
@@ -9,7 +10,7 @@ import 'classnames';
 import '@alfalab/hooks';
 
 var Tag = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? getComponentBreakpoint() : _b, restProps = __rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = useMatchMedia(query)[0];
     var Component = isDesktop ? TagDesktop : TagMobile;

package/tag/esm/components/base-tag/Component.d.ts

@@ -94,7 +94,7 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Размер компонента
      * @description xxs, xs, s, m, l, xl deprecated, используйте вместо них 32, 40, 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xl" | "xxs" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Дочерние элементы.
      */

package/tag/esm/index.js

@@ -2,6 +2,7 @@ export { Tag } from './Component.responsive.js';
 import 'tslib';
 import 'react';
 import '../../mq/esm';
+import '../../shared/esm';
 import './desktop/Component.desktop.js';
 import './components/base-tag/Component.js';
 import 'react-merge-refs';

package/tag/modern/Component.responsive.js

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import { useMatchMedia } from '../../mq/modern';
+import { getComponentBreakpoint } from '../../shared/modern';
 import { TagDesktop } from './desktop/Component.desktop.js';
 import { TagMobile } from './mobile/Component.mobile.js';
 import './components/base-tag/Component.js';
@@ -7,7 +8,7 @@ import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/hooks';
 
-const Tag = forwardRef(({ children, breakpoint = 1024, ...restProps }, ref) => {
+const Tag = forwardRef(({ children, breakpoint = getComponentBreakpoint(), ...restProps }, ref) => {
     const query = `(min-width: ${breakpoint}px)`;
     const [isDesktop] = useMatchMedia(query);
     const Component = isDesktop ? TagDesktop : TagMobile;

package/tag/modern/components/base-tag/Component.d.ts

@@ -94,7 +94,7 @@ declare const BaseTag: React.ForwardRefExoticComponent<Omit<NativeProps, "onClic
      * Размер компонента
      * @description xxs, xs, s, m, l, xl deprecated, используйте вместо них 32, 40, 48, 56, 64, 72 соответственно
      */
-    size?: "s" | "xxs" | "xs" | "m" | "l" | "xl" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xl" | "xxs" | 32 | 40 | 48 | 56 | 64 | 72 | undefined;
     /**
      * Дочерние элементы.
      */

package/tag/modern/index.js

@@ -1,6 +1,7 @@
 export { Tag } from './Component.responsive.js';
 import 'react';
 import '../../mq/modern';
+import '../../shared/modern';
 import './desktop/Component.desktop.js';
 import './components/base-tag/Component.js';
 import 'react-merge-refs';

package/themes/breakpoints/breakpoint-768.css

@@ -0,0 +1,3 @@
+:root {
+    --global-breakpoint-desktop: 768;
+}

package/themes/compiled/mobile-dark-bluetint.css

@@ -58,6 +58,10 @@
         background-color: #fff;
     } .badge__dot_1l6wq.badge__outlineCount_1l6wq {
     border: 1px solid #121213;
+}.card-image__cardImage_1jnst {
+    background: #e7e8ea;
+} .card-image__loaded_1jnst {
+    background: transparent
 }.backdrop__backdrop_1bojg {
     -webkit-tap-highlight-color: transparent;
 } .backdrop__appear_1bojg,
@@ -73,10 +77,6 @@
 } .backdrop__exitActive_1bojg,
 .backdrop__exitDone_1bojg {
     background-color: transparent;
-}.card-image__cardImage_1jnst {
-    background: #e7e8ea;
-} .card-image__loaded_1jnst {
-    background: transparent
 }.divider__component_cigz3 {
     border-bottom: 1px solid #353539;
 }.dropzone__component_1isbj {
@@ -168,7 +168,14 @@
         background: #fff;
     } .hatching-progress-bar__accent_5j2u0 {
         background: #f83a2a;
-    }.indicator__component_96ho4 {
+    }.icon-view__component_10g9p {
+    color: rgba(238, 238, 251, 0.55)
+} .icon-view__bg_10g9p {
+    fill: #1c1c1e;
+} .icon-view__border_10g9p {
+    stroke: rgba(225, 225, 248, 0.09);
+    fill: transparent;
+}.indicator__component_96ho4 {
     color: rgba(255, 255, 255, 0.94);
     background-color: #f83a2a;
 } .indicator__red_96ho4 {
@@ -186,14 +193,7 @@
     color: rgba(255, 255, 255, 0.94)
 } .indicator__grey_96ho4.indicator__border_96ho4 {
         outline: 2px solid #121213;
-    }.icon-view__component_10g9p {
-    color: rgba(238, 238, 251, 0.55)
-} .icon-view__bg_10g9p {
-    fill: #1c1c1e;
-} .icon-view__border_10g9p {
-    stroke: rgba(225, 225, 248, 0.09);
-    fill: transparent;
-}@keyframes loader__blink_13yub {
+    }@keyframes loader__blink_13yub {
 }.link__primary_1594o {
     color: rgba(255, 255, 255, 0.94);
     border-bottom-color: rgba(255, 255, 255, 0.94)
@@ -310,7 +310,25 @@
     100% {
         background: rgb(198, 205, 214);
     }
-}.segmented-control__wrapper_3hkmf {
+}.slider__component_1tniw .noUi-base:hover .noUi-connects {
+            background: rgba(222, 222, 238, 0.13);
+        } .slider__component_1tniw .noUi-base:hover .noUi-connect {
+            background: #f83a2a;
+        } .slider__component_1tniw .noUi-handle:hover .noUi-touch-area {
+        background: #ff503e;
+    } .slider__component_1tniw .noUi-handle:active .noUi-touch-area {
+        background: #fd624e;
+    } .slider__component_1tniw .noUi-connects {
+        background: rgba(222, 222, 238, 0.13);
+    } .slider__component_1tniw .noUi-connect {
+        background: #f83a2a;
+    } .slider__component_1tniw .noUi-handle {
+        border: 2px solid transparent;
+    } .slider__component_1tniw .noUi-touch-area {
+        background: #f83a2a;
+    } .slider__component_1tniw .noUi-pips {
+        color: rgba(238, 238, 251, 0.55);
+    }.segmented-control__wrapper_3hkmf {
     background-color: rgba(225, 225, 248, 0.09);
 } .segmented-control__segment_3hkmf.segmented-control__selected_3hkmf {
     color: rgba(255, 255, 255, 0.94);
@@ -344,24 +362,6 @@
     color: rgba(3, 3, 6, 0.88)
 } .segmented-control__segment_15rjq:not(:first-child):before {
         background-color: rgba(15, 25, 55, 0.1);
-    }.slider__component_1tniw .noUi-base:hover .noUi-connects {
-            background: rgba(222, 222, 238, 0.13);
-        } .slider__component_1tniw .noUi-base:hover .noUi-connect {
-            background: #f83a2a;
-        } .slider__component_1tniw .noUi-handle:hover .noUi-touch-area {
-        background: #ff503e;
-    } .slider__component_1tniw .noUi-handle:active .noUi-touch-area {
-        background: #fd624e;
-    } .slider__component_1tniw .noUi-connects {
-        background: rgba(222, 222, 238, 0.13);
-    } .slider__component_1tniw .noUi-connect {
-        background: #f83a2a;
-    } .slider__component_1tniw .noUi-handle {
-        border: 2px solid transparent;
-    } .slider__component_1tniw .noUi-touch-area {
-        background: #f83a2a;
-    } .slider__component_1tniw .noUi-pips {
-        color: rgba(238, 238, 251, 0.55);
     }.spinner__component_1a4j5 {
     color: #fff;
 }

package/toast/Component.responsive.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var coreComponentsMq = require('../mq');
+var coreComponentsShared = require('../shared');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -11,7 +12,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var Toast = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
+    var children = _a.children, _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["children", "breakpoint"]);
     var query = "(min-width: ".concat(breakpoint, "px)");
     var isDesktop = coreComponentsMq.useMatchMedia(query)[0];
     var Component = isDesktop ? desktop_Component_desktop.ToastDesktop : mobile_Component_mobile.ToastMobile;

package/toast/components/base-toast/component.js

@@ -9,7 +9,6 @@ var coreComponentsPopover = require('../../../popover');
 var coreComponentsPortal = require('../../../portal');
 var coreComponentsStack = require('../../../stack');
 var hooks = require('@alfalab/hooks');
-var stackContext = require('@alfalab/stack-context');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -29,7 +28,7 @@ var CSS_TRANSITION_CLASS_NAMES = {
 var noop = function () { };
 var BaseToast = React.forwardRef(function (_a, ref) {
     var _b;
-    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, titleClassName = _a.titleClassName, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? stackContext.stackingOrder.TOAST : _e, ToastPlate = _a.ToastPlate, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, useAnchorWidth = _a.useAnchorWidth, _f = _a.closeWithClickOutside, closeWithClickOutside = _f === void 0 ? true : _f, fallbackPlacements = _a.fallbackPlacements, restProps = tslib.__rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "titleClassName", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer", "useAnchorWidth", "closeWithClickOutside", "fallbackPlacements"]);
+    var anchorElement = _a.anchorElement, position = _a.position, offset = _a.offset, open = _a.open, _c = _a.autoCloseDelay, autoCloseDelay = _c === void 0 ? 3000 : _c, className = _a.className, titleClassName = _a.titleClassName, bottomOffset = _a.bottomOffset, _d = _a.style, style = _d === void 0 ? {} : _d, block = _a.block, _e = _a.zIndex, zIndex = _e === void 0 ? coreComponentsStack.stackingOrder.TOAST : _e, ToastPlate = _a.ToastPlate, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onTouchStart = _a.onTouchStart, onClose = _a.onClose, getPortalContainer = _a.getPortalContainer, useAnchorWidth = _a.useAnchorWidth, _f = _a.closeWithClickOutside, closeWithClickOutside = _f === void 0 ? true : _f, fallbackPlacements = _a.fallbackPlacements, restProps = tslib.__rest(_a, ["anchorElement", "position", "offset", "open", "autoCloseDelay", "className", "titleClassName", "bottomOffset", "style", "block", "zIndex", "ToastPlate", "onMouseEnter", "onMouseLeave", "onTouchStart", "onClose", "getPortalContainer", "useAnchorWidth", "closeWithClickOutside", "fallbackPlacements"]);
     var plateRef = React.useRef(null);
     var timerId = React.useRef(0);
     var prevOpen = hooks.usePrevious(open);