@alfalab/core-components 47.14.0-beta.0 → 47.14.0-beta.1

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

@@ -0,0 +1,52 @@
+import React, { useRef, useEffect } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+import cn from 'classnames';
+import { KeyboardFocusable } from '../../../../keyboard-focusable/moderncssm';
+import { fnUtils } from '../../../../shared/moderncssm';
+import { useTabs } from '../../hooks/use-tabs.js';
+import { ScrollableContainer } from '../scrollable-container/Component.js';
+import { Title } from '../title/Component.js';
+import 'react-merge-refs';
+import 'compute-scroll-into-view';
+import '../scroll-controls/Component.js';
+import 'lodash.debounce';
+import '../../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
+import '../scroll-controls/utils.js';
+import '../scroll-controls/index.module.css';
+import '../scrollable-container/index.module.css';
+import '../../../../skeleton/moderncssm';
+
+const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, onChange, dataTestId, platform, textStyle, inlineStyle, showSkeleton, skeletonProps, }) => {
+    const lineRef = useRef(null);
+    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
+        titles,
+        selectedId,
+        onChange,
+    });
+    useEffect(() => {
+        if (selectedTab) {
+            const updateLineWidth = () => {
+                if (lineRef.current) {
+                    lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
+                    lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+                }
+            };
+            const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+            const observer = new ResizeObserver$1(updateLineWidth);
+            observer.observe(selectedTab);
+            return () => observer.disconnect();
+        }
+        return fnUtils.noop;
+    }, [selectedTab]);
+    const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, !textStyle && size && styles[size], {
+            [styles.fullWidthScroll]: fullWidthScroll,
+        }) },
+        titles.map(({ dataTestId: _, toggleRef: __, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles, showSkeleton: showSkeleton, skeletonProps: skeletonProps }))))),
+        React.createElement("div", { className: styles.line, ref: lineRef })));
+    const 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, inlineStyle: inlineStyle, showSkeleton: showSkeleton }, renderContent())) : (React.createElement("div", { className: cn(styles.container, wrapperClassName, containerClassName), style: inlineStyle }, renderContent()));
+};
+
+export { PrimaryTabList };

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

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { PrimaryTabList } from './Component.js';
+import styles$1 from './index.module.css';
+import mobileStyles from './mobile.module.css';
+import '@juggle/resize-observer';
+import 'classnames';
+import '../../../../keyboard-focusable/moderncssm';
+import '../../../../shared/moderncssm';
+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/moderncssm';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
+import '../scroll-controls/utils.js';
+import '../scroll-controls/index.module.css';
+import '../scrollable-container/index.module.css';
+import '../title/Component.js';
+import '../../../../skeleton/moderncssm';
+
+const styles = {
+    ...styles$1,
+    ...mobileStyles,
+};
+const PrimaryTabListMobile = (props) => (React.createElement(PrimaryTabList, { ...props, styles: styles, platform: 'mobile' }));
+
+export { PrimaryTabListMobile };

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

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useMatchMedia } from '../../../../mq/moderncssm';
+import { PrimaryTabListDesktop } from './Component.desktop.js';
+import { PrimaryTabListMobile } from './Component.mobile.js';
+import './Component.js';
+import '@juggle/resize-observer';
+import 'classnames';
+import '../../../../keyboard-focusable/moderncssm';
+import '../../../../shared/moderncssm';
+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/moderncssm';
+import '@alfalab/icons-glyph/ChevronLeftCompactSIcon';
+import '@alfalab/icons-glyph/ChevronRightCompactSIcon';
+import '../scroll-controls/utils.js';
+import '../scroll-controls/index.module.css';
+import '../scrollable-container/index.module.css';
+import '../title/Component.js';
+import '../../../../skeleton/moderncssm';
+import './index.module.css';
+import './mobile.module.css';
+
+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 }));
+};
+
+export { PrimaryTabListResponsive };

package/tabs/moderncssm/components/primary-tablist/index.module.css

@@ -0,0 +1,531 @@
+/* */
+:root {
+    --primary-tablist-color: var(--color-light-text-secondary);
+    --primary-tablist-hover-color: var(--color-light-text-primary);
+    --primary-tablist-selected-color: var(--color-light-text-primary);
+    --primary-tablist-disabled-color: var(--color-light-text-tertiary);
+    --primary-tablist-bottom-border-color: var(--color-light-neutral-translucent-500);
+    --primary-tablist-line-color: var(--color-light-accent-primary);
+    --primary-tablist-font-feature-settings: normal;
+
+    /* mobile */
+
+    /* size s */
+    --primary-tablist-s-gaps: var(--gap-32);
+    --primary-tablist-s-font-size: 18px;
+    --primary-tablist-s-font-weight: 400;
+    --primary-tablist-s-font-family: var(--font-family-system);
+    --primary-tablist-s-padding: 0 0 var(--gap-12);
+
+    /* size m */
+    --primary-tablist-m-gaps: var(--gap-32);
+    --primary-tablist-m-font-size: 18px;
+    --primary-tablist-m-font-weight: 400;
+    --primary-tablist-m-font-family: var(--font-family-system);
+    --primary-tablist-m-padding: 0 0 var(--gap-16);
+
+    /* size l */
+    --primary-tablist-l-gaps: var(--gap-32);
+    --primary-tablist-l-font-size: 18px;
+    --primary-tablist-l-font-weight: 400;
+    --primary-tablist-l-font-family: var(--font-family-system);
+    --primary-tablist-l-padding: 0 0 var(--gap-20);
+
+    /* size xl */
+    --primary-tablist-xl-gaps: var(--gap-32);
+    --primary-tablist-xl-font-size: 18px;
+    --primary-tablist-xl-font-weight: 400;
+    --primary-tablist-xl-font-family: var(--font-family-system);
+    --primary-tablist-xl-padding: 0 0 var(--gap-20);
+
+    /* mobile */
+
+    /* size xxs */
+
+    /* size xs */
+
+    /* size s */
+
+    /* size m */
+
+    /* size l */
+
+    /* size xl */
+}
+.component {
+    position: relative;
+    display: inline-flex;
+    min-width: 100%
+}
+.component:before {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 1px;
+        height: 1px;
+        width: 100%;
+        background-color: var(--primary-tablist-bottom-border-color);
+    }
+.desktop.paragraph-primary-large .title {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 400;
+    }
+.desktop.paragraph-primary-medium .title {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+    }
+.desktop.paragraph-primary-small .title {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 400;
+    }
+.desktop.action-primary-large .title {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 500;
+    }
+.desktop.action-primary-medium .title {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 500;
+    }
+.desktop.action-primary-small .title {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 500;
+    }
+.desktop.accent-primary-large .title {
+        font-size: 18px;
+        line-height: 24px;
+        font-weight: 700;
+    }
+.desktop.accent-primary-medium .title {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 700;
+    }
+.desktop.accent-primary-small .title {
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: 700;
+    }
+.desktop.paragraph-primary-large .title, .desktop.paragraph-primary-medium .title, .desktop.accent-primary-large .title, .desktop.accent-primary-medium .title, .desktop.action-primary-large .title, .desktop.action-primary-medium .title {
+        padding-bottom: calc(24px / 2);
+    }
+.desktop.paragraph-primary-large .title + .title,
+    .desktop.paragraph-primary-large .pickerWrapper,
+    .desktop.paragraph-primary-medium .title + .title,
+    .desktop.paragraph-primary-medium .pickerWrapper,
+    .desktop.accent-primary-large .title + .title,
+    .desktop.accent-primary-large .pickerWrapper,
+    .desktop.accent-primary-medium .title + .title,
+    .desktop.accent-primary-medium .pickerWrapper,
+    .desktop.action-primary-large .title + .title,
+    .desktop.action-primary-large .pickerWrapper,
+    .desktop.action-primary-medium .title + .title,
+    .desktop.action-primary-medium .pickerWrapper {
+        margin-left: 24px;
+    }
+.desktop.paragraph-primary-large .option, .desktop.paragraph-primary-medium .option, .desktop.accent-primary-large .option, .desktop.accent-primary-medium .option, .desktop.action-primary-large .option, .desktop.action-primary-medium .option {
+        padding: 0;
+    }
+.desktop.paragraph-primary-large .scrollControls > button, .desktop.paragraph-primary-medium .scrollControls > button, .desktop.accent-primary-large .scrollControls > button, .desktop.accent-primary-medium .scrollControls > button, .desktop.action-primary-large .scrollControls > button, .desktop.action-primary-medium .scrollControls > button {
+            box-sizing: content-box;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+        }
+.desktop.paragraph-primary-large .scrollControls button:first-child, .desktop.paragraph-primary-medium .scrollControls button:first-child, .desktop.accent-primary-large .scrollControls button:first-child, .desktop.accent-primary-medium .scrollControls button:first-child, .desktop.action-primary-large .scrollControls button:first-child, .desktop.action-primary-medium .scrollControls button:first-child {
+            margin: 0 0 0 calc(24px / 2);
+        }
+.desktop.paragraph-primary-small .title, .desktop.accent-primary-small .title, .desktop.action-primary-small .title {
+        padding-bottom: calc(20px / 2);
+    }
+.desktop.paragraph-primary-small .title + .title,
+    .desktop.paragraph-primary-small .pickerWrapper,
+    .desktop.accent-primary-small .title + .title,
+    .desktop.accent-primary-small .pickerWrapper,
+    .desktop.action-primary-small .title + .title,
+    .desktop.action-primary-small .pickerWrapper {
+        margin-left: 20px;
+    }
+.desktop.paragraph-primary-small .option, .desktop.accent-primary-small .option, .desktop.action-primary-small .option {
+        padding: 0;
+    }
+.desktop.paragraph-primary-small .scrollControls > button, .desktop.accent-primary-small .scrollControls > button, .desktop.action-primary-small .scrollControls > button {
+            box-sizing: content-box;
+            width: 20px;
+            height: 20px;
+            padding: 0;
+        }
+.desktop.paragraph-primary-small .scrollControls button:first-child, .desktop.accent-primary-small .scrollControls button:first-child, .desktop.action-primary-small .scrollControls button:first-child {
+            margin: 0 0 0 calc(20px / 2);
+        }
+.desktop.headline-system-xlarge .title {
+        font-size: 48px;
+        line-height: 52px;
+        font-weight: 700;
+    }
+.desktop.headline-system-large .title {
+        font-size: 40px;
+        line-height: 48px;
+        font-weight: 700;
+    }
+.desktop.headline-system-medium .title {
+        font-size: 30px;
+        line-height: 36px;
+        font-weight: 700;
+    }
+.desktop.headline-system-small .title {
+        font-size: 22px;
+        line-height: 26px;
+        font-weight: 700;
+    }
+.desktop.headline-system-xsmall .title {
+        font-size: 18px;
+        line-height: 22px;
+        font-weight: 700;
+    }
+.desktop.headline-xlarge .title {
+        font-size: 48px;
+        line-height: 64px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }
+.desktop.headline-large .title {
+        font-size: 40px;
+        line-height: 48px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }
+.desktop.headline-medium .title {
+        font-size: 32px;
+        line-height: 40px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }
+.desktop.headline-small .title {
+        font-size: 24px;
+        line-height: 32px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }
+.desktop.headline-xsmall .title {
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 500;
+        font-feature-settings: 'ss01';
+        font-family: var(--font-family-styrene);
+    }
+.desktop.headline-system-xlarge .title {
+        padding-bottom: calc(52px / 2);
+    }
+.desktop.headline-system-xlarge .title + .title,
+    .desktop.headline-system-xlarge .pickerWrapper {
+        margin-left: 52px;
+    }
+.desktop.headline-system-xlarge .option {
+        padding: 0;
+    }
+.desktop.headline-system-xlarge .scrollControls > button {
+            box-sizing: content-box;
+            width: 52px;
+            height: 52px;
+            padding: 0;
+        }
+.desktop.headline-system-xlarge .scrollControls button:first-child {
+            margin: 0 0 0 calc(52px / 2);
+        }
+.desktop.headline-system-large .title, .desktop.headline-large .title {
+        padding-bottom: calc(48px / 2);
+    }
+.desktop.headline-system-large .title + .title,
+    .desktop.headline-system-large .pickerWrapper,
+    .desktop.headline-large .title + .title,
+    .desktop.headline-large .pickerWrapper {
+        margin-left: 48px;
+    }
+.desktop.headline-system-large .option, .desktop.headline-large .option {
+        padding: 0;
+    }
+.desktop.headline-system-large .scrollControls > button, .desktop.headline-large .scrollControls > button {
+            box-sizing: content-box;
+            width: 48px;
+            height: 48px;
+            padding: 0;
+        }
+.desktop.headline-system-large .scrollControls button:first-child, .desktop.headline-large .scrollControls button:first-child {
+            margin: 0 0 0 calc(48px / 2);
+        }
+.desktop.headline-system-medium .title {
+        padding-bottom: calc(36px / 2);
+    }
+.desktop.headline-system-medium .title + .title,
+    .desktop.headline-system-medium .pickerWrapper {
+        margin-left: 36px;
+    }
+.desktop.headline-system-medium .option {
+        padding: 0;
+    }
+.desktop.headline-system-medium .scrollControls > button {
+            box-sizing: content-box;
+            width: 36px;
+            height: 36px;
+            padding: 0;
+        }
+.desktop.headline-system-medium .scrollControls button:first-child {
+            margin: 0 0 0 calc(36px / 2);
+        }
+.desktop.headline-system-small .title {
+        padding-bottom: calc(26px / 2);
+    }
+.desktop.headline-system-small .title + .title,
+    .desktop.headline-system-small .pickerWrapper {
+        margin-left: 26px;
+    }
+.desktop.headline-system-small .option {
+        padding: 0;
+    }
+.desktop.headline-system-small .scrollControls > button {
+            box-sizing: content-box;
+            width: 26px;
+            height: 26px;
+            padding: 0;
+        }
+.desktop.headline-system-small .scrollControls button:first-child {
+            margin: 0 0 0 calc(26px / 2);
+        }
+.desktop.headline-system-xsmall .title {
+        padding-bottom: calc(22px / 2);
+    }
+.desktop.headline-system-xsmall .title + .title,
+    .desktop.headline-system-xsmall .pickerWrapper {
+        margin-left: 22px;
+    }
+.desktop.headline-system-xsmall .option {
+        padding: 0;
+    }
+.desktop.headline-system-xsmall .scrollControls > button {
+            box-sizing: content-box;
+            width: 22px;
+            height: 22px;
+            padding: 0;
+        }
+.desktop.headline-system-xsmall .scrollControls button:first-child {
+            margin: 0 0 0 calc(22px / 2);
+        }
+.desktop.headline-xlarge .title {
+        padding-bottom: calc(64px / 2);
+    }
+.desktop.headline-xlarge .title + .title,
+    .desktop.headline-xlarge .pickerWrapper {
+        margin-left: 64px;
+    }
+.desktop.headline-xlarge .option {
+        padding: 0;
+    }
+.desktop.headline-xlarge .scrollControls > button {
+            box-sizing: content-box;
+            width: 64px;
+            height: 64px;
+            padding: 0;
+        }
+.desktop.headline-xlarge .scrollControls button:first-child {
+            margin: 0 0 0 calc(64px / 2);
+        }
+.desktop.headline-medium .title {
+        padding-bottom: calc(40px / 2);
+    }
+.desktop.headline-medium .title + .title,
+    .desktop.headline-medium .pickerWrapper {
+        margin-left: 40px;
+    }
+.desktop.headline-medium .option {
+        padding: 0;
+    }
+.desktop.headline-medium .scrollControls > button {
+            box-sizing: content-box;
+            width: 40px;
+            height: 40px;
+            padding: 0;
+        }
+.desktop.headline-medium .scrollControls button:first-child {
+            margin: 0 0 0 calc(40px / 2);
+        }
+.desktop.headline-small .title {
+        padding-bottom: calc(32px / 2);
+    }
+.desktop.headline-small .title + .title,
+    .desktop.headline-small .pickerWrapper {
+        margin-left: 32px;
+    }
+.desktop.headline-small .option {
+        padding: 0;
+    }
+.desktop.headline-small .scrollControls > button {
+            box-sizing: content-box;
+            width: 32px;
+            height: 32px;
+            padding: 0;
+        }
+.desktop.headline-small .scrollControls button:first-child {
+            margin: 0 0 0 calc(32px / 2);
+        }
+.desktop.headline-xsmall .title {
+        padding-bottom: calc(24px / 2);
+    }
+.desktop.headline-xsmall .title + .title,
+    .desktop.headline-xsmall .pickerWrapper {
+        margin-left: 24px;
+    }
+.desktop.headline-xsmall .option {
+        padding: 0;
+    }
+.desktop.headline-xsmall .scrollControls > button {
+            box-sizing: content-box;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+        }
+.desktop.headline-xsmall .scrollControls button:first-child {
+            margin: 0 0 0 calc(24px / 2);
+        }
+.fullWidthScroll {
+    min-width: calc(100% - 2 * var(--gap-16));
+    margin: 0 var(--gap-16);
+}
+.container {
+    position: relative;
+    overflow: hidden;
+
+    /* focus-outline fix */
+    margin: var(--gap-4-neg) 0 var(--gap-4-neg) var(--gap-4-neg);
+    padding: var(--gap-4) 0 var(--gap-4) var(--gap-4);
+}
+.title {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0;
+    cursor: pointer;
+    color: var(--primary-tablist-color);
+    font-feature-settings: var(--primary-tablist-font-feature-settings);
+    transition: color 0.2s ease;
+    border: 0;
+    background: none;
+    white-space: nowrap;
+    box-shadow: none;
+    -webkit-user-select: none;
+            user-select: none;
+    outline: none
+}
+.title:not(:disabled):hover {
+        color: var(--primary-tablist-hover-color);
+    }
+.focused {
+    outline: 2px solid var(--focus-color);
+    outline-offset: 2px;
+}
+.collapsed {
+    order: 99;
+    visibility: collapse;
+}
+.selected {
+    cursor: default;
+    color: var(--primary-tablist-selected-color);
+}
+.disabled {
+    cursor: var(--disabled-cursor);
+    color: var(--primary-tablist-disabled-color);
+}
+.line {
+    position: absolute;
+    height: 3px;
+    bottom: 0;
+    left: 0;
+    background-color: var(--primary-tablist-line-color);
+    transition: transform 0.2s ease, width 0.2s ease;
+}
+.option {
+    color: var(--color-light-text-primary);
+}
+/* sizes */
+.s .title, .xs .title, .xxs .title {
+        padding: var(--primary-tablist-s-padding);
+        font-size: var(--primary-tablist-s-font-size);
+        font-weight: var(--primary-tablist-s-font-weight);
+        font-family: var(--primary-tablist-s-font-family);
+        line-height: 24px;
+    }
+.s .title + .title, .xs .title + .title, .xxs .title + .title {
+        margin-left: var(--primary-tablist-s-gaps);
+    }
+.s .pickerWrapper, .xs .pickerWrapper, .xxs .pickerWrapper {
+        margin-left: var(--primary-tablist-s-gaps);
+    }
+.s .option, .xs .option, .xxs .option {
+        padding: 0;
+    }
+.m .title {
+        padding: var(--primary-tablist-m-padding);
+        font-size: var(--primary-tablist-m-font-size);
+        font-weight: var(--primary-tablist-m-font-weight);
+        font-family: var(--primary-tablist-m-font-family);
+        line-height: 24px;
+    }
+.m .title + .title {
+        margin-left: var(--primary-tablist-m-gaps);
+    }
+.m .pickerWrapper {
+        margin-left: var(--primary-tablist-m-gaps);
+    }
+.m .option {
+        padding: 0;
+    }
+.l .title {
+        padding: var(--primary-tablist-l-padding);
+        font-size: var(--primary-tablist-l-font-size);
+        font-weight: var(--primary-tablist-l-font-weight);
+        font-family: var(--primary-tablist-l-font-family);
+        line-height: 24px;
+    }
+.l .title + .title {
+        margin-left: var(--primary-tablist-l-gaps);
+    }
+.l .pickerWrapper {
+        margin-left: var(--primary-tablist-l-gaps);
+    }
+.l .option {
+        padding: 0;
+    }
+.xl .title {
+        padding: var(--primary-tablist-xl-padding);
+        font-size: var(--primary-tablist-xl-font-size);
+        font-weight: var(--primary-tablist-xl-font-weight);
+        font-family: var(--primary-tablist-xl-font-family);
+        line-height: 32px;
+    }
+.xl .title + .title {
+        margin-left: var(--primary-tablist-xl-gaps);
+    }
+.xl .pickerWrapper {
+        margin-left: var(--primary-tablist-xl-gaps);
+    }
+.xl .option {
+        padding: 0;
+    }
+.rightAddons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: var(--gap-8);
+}
+.rightAddonsMarginZero {
+    margin-left: 0;
+}