@alfalab/core-components 44.5.1-beta.1 → 44.5.1-beta.3

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

@@ -1,22 +1,22 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { s as styles } from '../../index.module-77b9e786.js';
+import { s as styles } from '../../index.module-b24b51c6.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';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
 import 'lodash.debounce';
 import '../../../../icon-button/esm';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../title/Component.js';
-import '../../hooks/use-tabs.js';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
+import '../title/Component.js';
 
 var PrimaryTabListDesktop = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'm' : _b, restProps = __rest(_a, ["size"]);

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

@@ -12,12 +12,12 @@ import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
 import 'lodash.debounce';
 import '../../../../icon-button/esm';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
 
 var PrimaryTabList = function (_a) {
-    var size = _a.size, _b = _a.styles, styles = _b === void 0 ? {} : _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, _e = _a.scrollable, scrollable = _e === void 0 ? true : _e, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, platform = _a.platform;
+    var size = _a.size, _b = _a.styles, styles = _b === void 0 ? {} : _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, _e = _a.scrollable, scrollable = _e === void 0 ? true : _e, fullWidthScroll = _a.fullWidthScroll, onChange = _a.onChange, dataTestId = _a.dataTestId, platform = _a.platform, textStyle = _a.textStyle;
     var lineRef = useRef(null);
     var _f = useTabs({
         titles: titles,
@@ -41,7 +41,7 @@ var PrimaryTabList = function (_a) {
     }, [selectedTab]);
     var renderContent = function () {
         var _a;
-        return (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], (_a = {},
+        return (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, !textStyle && size && styles[size], (_a = {},
                 _a[styles.fullWidthScroll] = fullWidthScroll,
                 _a)) },
             titles.map(function (_a, index) {
@@ -50,7 +50,8 @@ var PrimaryTabList = function (_a) {
             }),
             React.createElement("div", { className: styles.line, ref: lineRef })));
     };
-    return scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll, view: 'primary', size: size, platform: platform }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
+    var wrapperClassName = cn(textStyle && styles[textStyle], styles[platform]);
+    return scrollable ? (React.createElement(ScrollableContainer, { containerWrapperClassName: wrapperClassName, activeChild: focusedTab || selectedTab, containerClassName: containerClassName, scrollControlsClassName: cn(textStyle && styles.scrollControls), fullWidthScroll: fullWidthScroll, view: 'primary', size: textStyle ? undefined : size, platform: platform }, renderContent())) : (React.createElement("div", { className: cn(styles.container, wrapperClassName, containerClassName) }, renderContent()));
 };
 
 export { PrimaryTabList };

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

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

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

@@ -1,30 +1,27 @@
-import { __assign, __rest } from 'tslib';
+import { __assign } from 'tslib';
 import React from 'react';
-import cn from 'classnames';
 import { PrimaryTabList } from './Component.js';
-import { s as styles$1 } from '../../index.module-77b9e786.js';
+import { s as styles$1 } from '../../index.module-b24b51c6.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';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
 import 'lodash.debounce';
 import '../../../../icon-button/esm';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../title/Component.js';
-import '../../hooks/use-tabs.js';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
+import '../title/Component.js';
 
-var mobileStyles = {"title":"tabs__title_1rxyr tabs__title_ravim","mobile":"tabs__mobile_1rxyr"};
+var mobileStyles = {"title":"tabs__title_1rxyr tabs__title_ravim","mobile":"tabs__mobile_1rxyr","paragraph-primary-large":"tabs__paragraph-primary-large_1rxyr","paragraph-primary-medium":"tabs__paragraph-primary-medium_1rxyr","paragraph-primary-small":"tabs__paragraph-primary-small_1rxyr","action-primary-large":"tabs__action-primary-large_1rxyr","action-primary-medium":"tabs__action-primary-medium_1rxyr","action-primary-small":"tabs__action-primary-small_1rxyr","accent-primary-large":"tabs__accent-primary-large_1rxyr","accent-primary-medium":"tabs__accent-primary-medium_1rxyr","accent-primary-small":"tabs__accent-primary-small_1rxyr","pickerWrapper":"tabs__pickerWrapper_1rxyr","option":"tabs__option_1rxyr","scrollControls":"tabs__scrollControls_1rxyr","headline-system-xlarge":"tabs__headline-system-xlarge_1rxyr","headline-system-large":"tabs__headline-system-large_1rxyr","headline-system-medium":"tabs__headline-system-medium_1rxyr","headline-system-small":"tabs__headline-system-small_1rxyr","headline-system-xsmall":"tabs__headline-system-xsmall_1rxyr","headline-xlarge":"tabs__headline-xlarge_1rxyr","headline-large":"tabs__headline-large_1rxyr","headline-medium":"tabs__headline-medium_1rxyr","headline-small":"tabs__headline-small_1rxyr","headline-xsmall":"tabs__headline-xsmall_1rxyr"};
 require('./mobile.css');
 
 var styles = __assign(__assign({}, styles$1), mobileStyles);
-var PrimaryTabListMobile = function (_a) {
-    var className = _a.className, restProps = __rest(_a, ["className"]);
-    return (React.createElement(PrimaryTabList, __assign({}, restProps, { styles: styles, className: cn(className, styles.mobile), platform: 'mobile' })));
-};
+var PrimaryTabListMobile = function (props) { return (React.createElement(PrimaryTabList, __assign({}, props, { styles: styles, platform: 'mobile' }))); };
 
 export { PrimaryTabListMobile };

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

@@ -3,23 +3,23 @@ import React from 'react';
 import { useMatchMedia } from '../../../../mq/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';
-import '../title/Component.js';
 import 'compute-scroll-into-view';
 import '../scroll-controls/Component.js';
 import 'lodash.debounce';
 import '../../../../icon-button/esm';
-import '@alfalab/icons-glyph/ChevronLeftMIcon';
-import '@alfalab/icons-glyph/ChevronRightMIcon';
-import '../../index.module-77b9e786.js';
-import './Component.js';
-import '../../hooks/use-tabs.js';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
 import '../scroll-controls/utils.js';
+import '../title/Component.js';
+import '../../index.module-b24b51c6.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"]);

package/tabs/esm/components/primary-tablist/index.css

@@ -28,6 +28,8 @@
 } :root {
     --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
+    --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
+        'Helvetica Neue', Helvetica, sans-serif;
 } :root {
     --focus-color: var(--color-light-border-link);
     --disabled-cursor: not-allowed;
@@ -95,7 +97,263 @@
         height: 1px;
         width: 100%;
         background-color: var(--primary-tablist-bottom-border-color);
-    } .tabs__fullWidthScroll_ravim {
+    } .tabs__desktop_ravim.tabs__paragraph-primary-large_ravim .tabs__title_ravim {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 400;
+    } .tabs__desktop_ravim.tabs__paragraph-primary-medium_ravim .tabs__title_ravim {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+    } .tabs__desktop_ravim.tabs__paragraph-primary-small_ravim .tabs__title_ravim {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 400;
+    } .tabs__desktop_ravim.tabs__action-primary-large_ravim .tabs__title_ravim {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 500;
+    } .tabs__desktop_ravim.tabs__action-primary-medium_ravim .tabs__title_ravim {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 500;
+    } .tabs__desktop_ravim.tabs__action-primary-small_ravim .tabs__title_ravim {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 500;
+    } .tabs__desktop_ravim.tabs__accent-primary-large_ravim .tabs__title_ravim {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 700;
+    } .tabs__desktop_ravim.tabs__accent-primary-medium_ravim .tabs__title_ravim {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 700;
+    } .tabs__desktop_ravim.tabs__accent-primary-small_ravim .tabs__title_ravim {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+    } .tabs__desktop_ravim.tabs__paragraph-primary-large_ravim .tabs__title_ravim, .tabs__desktop_ravim.tabs__paragraph-primary-medium_ravim .tabs__title_ravim, .tabs__desktop_ravim.tabs__accent-primary-large_ravim .tabs__title_ravim, .tabs__desktop_ravim.tabs__accent-primary-medium_ravim .tabs__title_ravim, .tabs__desktop_ravim.tabs__action-primary-large_ravim .tabs__title_ravim, .tabs__desktop_ravim.tabs__action-primary-medium_ravim .tabs__title_ravim {
+        padding-bottom: calc(24px / 2);
+    } .tabs__desktop_ravim.tabs__paragraph-primary-large_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__paragraph-primary-large_ravim .tabs__pickerWrapper_ravim,
+    .tabs__desktop_ravim.tabs__paragraph-primary-medium_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__paragraph-primary-medium_ravim .tabs__pickerWrapper_ravim,
+    .tabs__desktop_ravim.tabs__accent-primary-large_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__accent-primary-large_ravim .tabs__pickerWrapper_ravim,
+    .tabs__desktop_ravim.tabs__accent-primary-medium_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__accent-primary-medium_ravim .tabs__pickerWrapper_ravim,
+    .tabs__desktop_ravim.tabs__action-primary-large_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__action-primary-large_ravim .tabs__pickerWrapper_ravim,
+    .tabs__desktop_ravim.tabs__action-primary-medium_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__action-primary-medium_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 24px;
+    } .tabs__desktop_ravim.tabs__paragraph-primary-large_ravim .tabs__option_ravim, .tabs__desktop_ravim.tabs__paragraph-primary-medium_ravim .tabs__option_ravim, .tabs__desktop_ravim.tabs__accent-primary-large_ravim .tabs__option_ravim, .tabs__desktop_ravim.tabs__accent-primary-medium_ravim .tabs__option_ravim, .tabs__desktop_ravim.tabs__action-primary-large_ravim .tabs__option_ravim, .tabs__desktop_ravim.tabs__action-primary-medium_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__paragraph-primary-large_ravim .tabs__scrollControls_ravim > button, .tabs__desktop_ravim.tabs__paragraph-primary-medium_ravim .tabs__scrollControls_ravim > button, .tabs__desktop_ravim.tabs__accent-primary-large_ravim .tabs__scrollControls_ravim > button, .tabs__desktop_ravim.tabs__accent-primary-medium_ravim .tabs__scrollControls_ravim > button, .tabs__desktop_ravim.tabs__action-primary-large_ravim .tabs__scrollControls_ravim > button, .tabs__desktop_ravim.tabs__action-primary-medium_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__paragraph-primary-large_ravim .tabs__scrollControls_ravim button:first-child, .tabs__desktop_ravim.tabs__paragraph-primary-medium_ravim .tabs__scrollControls_ravim button:first-child, .tabs__desktop_ravim.tabs__accent-primary-large_ravim .tabs__scrollControls_ravim button:first-child, .tabs__desktop_ravim.tabs__accent-primary-medium_ravim .tabs__scrollControls_ravim button:first-child, .tabs__desktop_ravim.tabs__action-primary-large_ravim .tabs__scrollControls_ravim button:first-child, .tabs__desktop_ravim.tabs__action-primary-medium_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(24px / 2);
+        } .tabs__desktop_ravim.tabs__paragraph-primary-small_ravim .tabs__title_ravim, .tabs__desktop_ravim.tabs__accent-primary-small_ravim .tabs__title_ravim, .tabs__desktop_ravim.tabs__action-primary-small_ravim .tabs__title_ravim {
+        padding-bottom: calc(20px / 2);
+    } .tabs__desktop_ravim.tabs__paragraph-primary-small_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__paragraph-primary-small_ravim .tabs__pickerWrapper_ravim,
+    .tabs__desktop_ravim.tabs__accent-primary-small_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__accent-primary-small_ravim .tabs__pickerWrapper_ravim,
+    .tabs__desktop_ravim.tabs__action-primary-small_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__action-primary-small_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 20px;
+    } .tabs__desktop_ravim.tabs__paragraph-primary-small_ravim .tabs__option_ravim, .tabs__desktop_ravim.tabs__accent-primary-small_ravim .tabs__option_ravim, .tabs__desktop_ravim.tabs__action-primary-small_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__paragraph-primary-small_ravim .tabs__scrollControls_ravim > button, .tabs__desktop_ravim.tabs__accent-primary-small_ravim .tabs__scrollControls_ravim > button, .tabs__desktop_ravim.tabs__action-primary-small_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 20px;
+            height: 20px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__paragraph-primary-small_ravim .tabs__scrollControls_ravim button:first-child, .tabs__desktop_ravim.tabs__accent-primary-small_ravim .tabs__scrollControls_ravim button:first-child, .tabs__desktop_ravim.tabs__action-primary-small_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(20px / 2);
+        } .tabs__desktop_ravim.tabs__headline-system-xlarge_ravim .tabs__title_ravim {
+        font-size: 48px;
+        line-height: 52px;
+        font-weight: 700;
+    } .tabs__desktop_ravim.tabs__headline-system-large_ravim .tabs__title_ravim {
+        font-size: 40px;
+        line-height: 48px;
+        font-weight: 700;
+    } .tabs__desktop_ravim.tabs__headline-system-medium_ravim .tabs__title_ravim {
+        font-size: 30px;
+        line-height: 36px;
+        font-weight: 700;
+    } .tabs__desktop_ravim.tabs__headline-system-small_ravim .tabs__title_ravim {
+        font-size: 22px;
+        line-height: 26px;
+        font-weight: 700;
+    } .tabs__desktop_ravim.tabs__headline-system-xsmall_ravim .tabs__title_ravim {
+        font-size: 18px;
+        line-height: 22px;
+        font-weight: 700;
+    } .tabs__desktop_ravim.tabs__headline-xlarge_ravim .tabs__title_ravim {
+        font-size: 48px;
+        line-height: 64px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__desktop_ravim.tabs__headline-large_ravim .tabs__title_ravim {
+        font-size: 40px;
+        line-height: 48px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__desktop_ravim.tabs__headline-medium_ravim .tabs__title_ravim {
+        font-size: 32px;
+        line-height: 40px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__desktop_ravim.tabs__headline-small_ravim .tabs__title_ravim {
+        font-size: 24px;
+        line-height: 32px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__desktop_ravim.tabs__headline-xsmall_ravim .tabs__title_ravim {
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    } .tabs__desktop_ravim.tabs__headline-system-xlarge_ravim .tabs__title_ravim {
+        padding-bottom: calc(52px / 2);
+    } .tabs__desktop_ravim.tabs__headline-system-xlarge_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-system-xlarge_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 52px;
+    } .tabs__desktop_ravim.tabs__headline-system-xlarge_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__headline-system-xlarge_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 52px;
+            height: 52px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__headline-system-xlarge_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(52px / 2);
+        } .tabs__desktop_ravim.tabs__headline-system-large_ravim .tabs__title_ravim, .tabs__desktop_ravim.tabs__headline-large_ravim .tabs__title_ravim {
+        padding-bottom: calc(48px / 2);
+    } .tabs__desktop_ravim.tabs__headline-system-large_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-system-large_ravim .tabs__pickerWrapper_ravim,
+    .tabs__desktop_ravim.tabs__headline-large_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-large_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 48px;
+    } .tabs__desktop_ravim.tabs__headline-system-large_ravim .tabs__option_ravim, .tabs__desktop_ravim.tabs__headline-large_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__headline-system-large_ravim .tabs__scrollControls_ravim > button, .tabs__desktop_ravim.tabs__headline-large_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 48px;
+            height: 48px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__headline-system-large_ravim .tabs__scrollControls_ravim button:first-child, .tabs__desktop_ravim.tabs__headline-large_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(48px / 2);
+        } .tabs__desktop_ravim.tabs__headline-system-medium_ravim .tabs__title_ravim {
+        padding-bottom: calc(36px / 2);
+    } .tabs__desktop_ravim.tabs__headline-system-medium_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-system-medium_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 36px;
+    } .tabs__desktop_ravim.tabs__headline-system-medium_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__headline-system-medium_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 36px;
+            height: 36px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__headline-system-medium_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(36px / 2);
+        } .tabs__desktop_ravim.tabs__headline-system-small_ravim .tabs__title_ravim {
+        padding-bottom: calc(26px / 2);
+    } .tabs__desktop_ravim.tabs__headline-system-small_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-system-small_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 26px;
+    } .tabs__desktop_ravim.tabs__headline-system-small_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__headline-system-small_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 26px;
+            height: 26px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__headline-system-small_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(26px / 2);
+        } .tabs__desktop_ravim.tabs__headline-system-xsmall_ravim .tabs__title_ravim {
+        padding-bottom: calc(22px / 2);
+    } .tabs__desktop_ravim.tabs__headline-system-xsmall_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-system-xsmall_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 22px;
+    } .tabs__desktop_ravim.tabs__headline-system-xsmall_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__headline-system-xsmall_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 22px;
+            height: 22px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__headline-system-xsmall_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(22px / 2);
+        } .tabs__desktop_ravim.tabs__headline-xlarge_ravim .tabs__title_ravim {
+        padding-bottom: calc(64px / 2);
+    } .tabs__desktop_ravim.tabs__headline-xlarge_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-xlarge_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 64px;
+    } .tabs__desktop_ravim.tabs__headline-xlarge_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__headline-xlarge_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 64px;
+            height: 64px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__headline-xlarge_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(64px / 2);
+        } .tabs__desktop_ravim.tabs__headline-medium_ravim .tabs__title_ravim {
+        padding-bottom: calc(40px / 2);
+    } .tabs__desktop_ravim.tabs__headline-medium_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-medium_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 40px;
+    } .tabs__desktop_ravim.tabs__headline-medium_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__headline-medium_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 40px;
+            height: 40px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__headline-medium_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(40px / 2);
+        } .tabs__desktop_ravim.tabs__headline-small_ravim .tabs__title_ravim {
+        padding-bottom: calc(32px / 2);
+    } .tabs__desktop_ravim.tabs__headline-small_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-small_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 32px;
+    } .tabs__desktop_ravim.tabs__headline-small_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__headline-small_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 32px;
+            height: 32px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__headline-small_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(32px / 2);
+        } .tabs__desktop_ravim.tabs__headline-xsmall_ravim .tabs__title_ravim {
+        padding-bottom: calc(24px / 2);
+    } .tabs__desktop_ravim.tabs__headline-xsmall_ravim .tabs__title_ravim + .tabs__title_ravim,
+    .tabs__desktop_ravim.tabs__headline-xsmall_ravim .tabs__pickerWrapper_ravim {
+        margin-left: 24px;
+    } .tabs__desktop_ravim.tabs__headline-xsmall_ravim .tabs__option_ravim {
+        padding: 0;
+    } .tabs__desktop_ravim.tabs__headline-xsmall_ravim .tabs__scrollControls_ravim > button {
+            box-sizing: content-box;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+        } .tabs__desktop_ravim.tabs__headline-xsmall_ravim .tabs__scrollControls_ravim button:first-child {
+            margin: 0 0 0 calc(24px / 2);
+        } .tabs__fullWidthScroll_ravim {
     min-width: calc(100% - 2 * var(--gap-m));
     margin: 0 var(--gap-m);
 } .tabs__container_ravim {