@cloud-ru/ds-uikit-product-header 2.1.7 → 2.1.8-preview-04e34550.0

package/dist/esm/components/ListCustom/renderListCustom.d.ts

@@ -0,0 +1,4 @@
+import { GroupItemRenderProps, ItemRenderProps } from '@cloud-ru/ds-list';
+/** Стабильные рендеры для `itemRender` / `groupItemRender` у `List`/`Droplist`. */
+export declare function renderListItemCustom(props: ItemRenderProps): import("react/jsx-runtime").JSX.Element;
+export declare function renderListItemGroupCustom(props: GroupItemRenderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ListCustom/renderListCustom.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListItemCustom } from './helperComponents/ListItemCustom/index.js';
+import { ListItemGroupCustom } from './helperComponents/ListItemGroupCustom/index.js';
+/** Стабильные рендеры для `itemRender` / `groupItemRender` у `List`/`Droplist`. */
+export function renderListItemCustom(props) {
+    return _jsx(ListItemCustom, { ...props });
+}
+export function renderListItemGroupCustom(props) {
+    return _jsx(ListItemGroupCustom, { ...props });
+}

package/dist/esm/components/MainMenu/helperComponents/Favorites/Favorites.js

@@ -6,8 +6,8 @@ import { SegmentControl, WIDTH } from '@cloud-ru/ds-segment-control';
 import { useEventHandler, useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import { useMemo } from 'react';
-import { useDesktopComfortClassName } from '../../../../hooks/useDesktopComfortClassName.js';
 import { headerLocale } from '../../../../locale/index.js';
+import { renderListItemCustom, renderListItemGroupCustom } from '../../../ListCustom/index.js';
 import { resolveInnerLinksByIds } from '../../utils/index.js';
 import { Content, FavoritesItemsSkeleton } from './components/index.js';
 import { FAVORITES_SEGMENT, FAVORITES_TEST_IDS } from './constants.js';
@@ -15,7 +15,6 @@ import styles from './styles.module.css';
 export function Favorites({ favorite, servicesById, headerClassName, isMobile }) {
     const { t } = headerLocale.useTranslations();
     const loading = favorite.loading;
-    const comfortClassName = useDesktopComfortClassName();
     const [segment, setSegment] = useValueControl({
         value: favorite.segment,
         defaultValue: FAVORITES_SEGMENT.Favorites,
@@ -38,5 +37,5 @@ export function Favorites({ favorite, servicesById, headerClassName, isMobile })
         favorite.onFavoriteServiceClick?.(service.id, event);
         service.onClick(event);
     });
-    return (_jsxs("div", { className: styles.root, "data-test-id": FAVORITES_TEST_IDS.root, children: [_jsxs("div", { className: cn(styles.header, headerClassName), "data-test-id": FAVORITES_TEST_IDS.header, children: [_jsx(SegmentControl, { size: 'm', width: WIDTH.Full, value: segment, onChange: setSegment, className: styles.segmentControl, "data-test-id": FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && (_jsx(Droplist, { size: 'm', ...favorite.actions, className: comfortClassName, closeDroplistOnItemClick: true, children: _jsx(Button, { view: 'simple', size: 'm', appearance: 'neutral', icon: _jsx(KebabSVG, { size: 24 }), "data-test-id": FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), loading ? (_jsx(FavoritesItemsSkeleton, {})) : (_jsx(Content, { isMobile: isMobile, favoriteIds: favorite.value, onFavoriteChange: favorite.onChange, favoriteItems: favoriteItems, recentItems: recentItems, segment: resolvedSegment, setSegment: setSegment, onFavoriteServiceClick: handleFavoriteServiceClick, onRecentServiceClick: handleRecentServiceClick }))] }));
+    return (_jsxs("div", { className: styles.root, "data-test-id": FAVORITES_TEST_IDS.root, children: [_jsxs("div", { className: cn(styles.header, headerClassName), "data-test-id": FAVORITES_TEST_IDS.header, children: [_jsx(SegmentControl, { size: 'm', width: WIDTH.Full, value: segment, onChange: setSegment, className: styles.segmentControl, "data-test-id": FAVORITES_TEST_IDS.segmentControl, items: segmentControlItems }), favorite.actions && (_jsx(Droplist, { ...favorite.actions, size: 's', closeDroplistOnItemClick: true, itemRender: renderListItemCustom, groupItemRender: renderListItemGroupCustom, children: _jsx(Button, { view: 'simple', size: 'm', appearance: 'neutral', icon: _jsx(KebabSVG, { size: 24 }), "data-test-id": FAVORITES_TEST_IDS.settingsButton, disabled: loading }) }))] }), loading ? (_jsx(FavoritesItemsSkeleton, {})) : (_jsx(Content, { isMobile: isMobile, favoriteIds: favorite.value, onFavoriteChange: favorite.onChange, favoriteItems: favoriteItems, recentItems: recentItems, segment: resolvedSegment, setSegment: setSegment, onFavoriteServiceClick: handleFavoriteServiceClick, onRecentServiceClick: handleRecentServiceClick }))] }));
 }

package/dist/esm/components/UserMenu/UserMenu.js

@@ -2,13 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar } from '@cloud-ru/ds-avatar';
 import { Droplist, SNAP_POINTS_PRESET } from '@cloud-ru/ds-list';
 import { useValueControl } from '@cloud-ru/ds-utils';
-import cn from 'classnames';
 import { useCallback, useMemo } from 'react';
 import { TEST_IDS } from '../../constants.js';
-import { useDesktopComfortClassName } from '../../hooks/useDesktopComfortClassName.js';
 import { useMobileLayout } from '../../hooks/useMobileLayout.js';
 import { headerLocale } from '../../locale/index.js';
 import { HeaderButton } from '../HeaderButton/index.js';
+import { renderListItemCustom, renderListItemGroupCustom } from '../ListCustom/index.js';
 import { useUserMenuItems } from './hooks/useUserMenuItems.js';
 import styles from './styles.module.css';
 // Выбор темы ведёт корневой список: `value` — текущая тема, `id` опций совпадает с
@@ -19,7 +18,6 @@ const SELECTION_STUB = { mode: 'single', value: '__empty_stub__', onChange: () =
 export function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout, topItems, organizationItems, bottomItems, settingItems, theme, onClick, triggerTooltip, }) {
     const { t } = headerLocale.useTranslations();
     const isMobile = useMobileLayout();
-    const comfortClassName = useDesktopComfortClassName();
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
     const { fullName = '', inviteCount } = profile;
     const handleClose = useCallback(() => {
@@ -45,5 +43,5 @@ export function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, o
                 appearance: 'primary',
             }
             : undefined, "data-test-id": TEST_IDS.userMenu.button, icon: _jsx(Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }), "data-pressed": open })), [fullName, inviteCount, onClick, open, setOpen, isMobile, triggerTooltip]);
-    return (_jsx(Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, pinTop: pinTop, items: menuItems, pinBottom: pinBottom, scroll: !isMobile, trigger: 'click', placement: 'bottom-end', className: cn(styles.userMenuDroplist, comfortClassName), closeOnPopstate: true, "data-test-id": TEST_IDS.userMenu.root, label: t('user'), snapPoints: SNAP_POINTS_PRESET.full, withDividers: false, triggerClassName: styles.userMenuDroplistTrigger, children: trigger }));
+    return (_jsx(Droplist, { open: open, onOpenChange: setOpen, size: 's', selection: SELECTION_STUB, pinTop: pinTop, items: menuItems, pinBottom: pinBottom, scroll: !isMobile, trigger: 'click', placement: 'bottom-end', className: styles.userMenuDroplist, closeOnPopstate: true, "data-test-id": TEST_IDS.userMenu.root, label: t('user'), snapPoints: SNAP_POINTS_PRESET.full, withDividers: false, triggerClassName: styles.userMenuDroplistTrigger, itemRender: renderListItemCustom, groupItemRender: renderListItemGroupCustom, children: trigger }));
 }

package/dist/esm/components/UserMenu/hooks/useThemeItem.js

@@ -2,12 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DaySVG, LaptopPhoneSVG, NightSVG, ThemeContrastSVG } from '@cloud-ru/ds-icons/interface/system';
 import { useCallback, useMemo } from 'react';
 import { TEST_IDS } from '../../../constants.js';
-import { useDesktopComfortClassName } from '../../../hooks/useDesktopComfortClassName.js';
 import { headerLocale } from '../../../locale/index.js';
 import { THEME_MODE } from '../types.js';
 export function useThemeItem({ value: themeMode, onChange, isMobile, onClose, }) {
     const { t } = headerLocale.useTranslations();
-    const comfortClassName = useDesktopComfortClassName();
     const handleClick = useCallback((themeMode) => () => {
         onChange?.(themeMode);
         !isMobile && onClose?.();
@@ -50,6 +48,5 @@ export function useThemeItem({ value: themeMode, onChange, isMobile, onClose, })
         beforeContent: _jsx(ThemeContrastSVG, {}),
         'data-test-id': TEST_IDS.userMenu.themeMode,
         items: themeModeOptions,
-        listClassName: comfortClassName,
-    }), [comfortClassName, t, themeModeOptions]);
+    }), [t, themeModeOptions]);
 }

package/dist/esm/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './HeaderButton/index.js';
 export * from './HeaderLayout/index.js';
+export * from './ListCustom/index.js';
 export * from './MainMenu/index.js';
 export * from './UserMenu/index.js';
 export * from './Logo/index.js';

package/dist/esm/components/index.js

@@ -1,5 +1,6 @@
 export * from './HeaderButton/index.js';
 export * from './HeaderLayout/index.js';
+export * from './ListCustom/index.js';
 export * from './MainMenu/index.js';
 export * from './UserMenu/index.js';
 export * from './Logo/index.js';

package/dist/esm/style.css

@@ -41,6 +41,444 @@
 .header[data-mobile] .right{
   gap:0;
 }
+.root{
+  display:flex;
+  flex:1 0 0;
+  gap:var(--sn-primitive-dimension-6, 6px);
+  min-width:0;
+}
+
+.centeredWrapper{
+  display:flex;
+  align-items:center;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
+}
+.centeredWrapper svg{
+  width:100%;
+  max-width:100%;
+  height:100%;
+  max-height:100%;
+}
+
+.centeredWrapperAfter{
+  justify-content:flex-end;
+}
+
+.textWrapper{
+  display:flex;
+  flex:1 0 0;
+  align-items:flex-start;
+}
+
+.textContent{
+  display:flex;
+  flex:1 0 0;
+  flex-direction:column;
+  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
+  align-items:flex-start;
+  justify-content:center;
+  padding:0;
+}
+
+.headline{
+  display:flex;
+  align-items:center;
+  align-self:stretch;
+  justify-content:space-between;
+  width:100%;
+  min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
+}
+
+.label{
+  overflow:hidden;
+  flex:1 1 50%;
+  min-width:0;
+  max-width:-moz-max-content;
+  max-width:max-content;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
+}
+
+.caption{
+  overflow:hidden;
+  flex:1 1 50%;
+  min-width:0;
+  max-width:-moz-max-content;
+  max-width:max-content;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.description{
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
+}
+
+.elementBeforeContent, .elementAfterContent{
+  display:flex;
+}
+
+.root[data-layout=item]{
+  align-items:flex-start;
+  padding:var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-4, 4px);
+}
+.root[data-layout=item] .centeredWrapper{
+  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
+}
+.root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
+  flex-direction:column;
+  align-items:flex-start;
+  min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:24px;
+}
+.root[data-layout=item] .headline{
+  gap:var(--sn-primitive-dimension-4, 4px);
+}
+.root[data-layout=item] .label{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+  display:flex;
+  align-items:center;
+}
+.root[data-layout=item] .caption{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, SB Sans Text));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-platform-comfort-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-16, 16px))));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-platform-comfort-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-12, 12px))));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+}
+.root[data-layout=item] .description{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+
+.root[data-layout=group]{
+  align-items:center;
+  min-height:var(--sn-primitive-dimension-28, 28px);
+}
+.root[data-layout=group] .centeredWrapper{
+  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
+}
+.root[data-layout=group] .elementBeforeContent, .root[data-layout=group] .elementAfterContent{
+  align-items:center;
+}
+.root[data-layout=group] .textWrapper{
+  gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:center;
+  padding-top:var(--sn-list-anatomy-size-s-listItem-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
+}
+.root[data-layout=group] .headline{
+  gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Text));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.root[data-layout=group] .label[data-group-variant=subtitle]{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
+}
+.root[data-layout=group] .label[data-group-variant=subtitleTertiary]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(0, 0, 0, 0.5803921569)));
+}
+
+.root[data-disabled] .textWrapper{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.root[data-disabled] .centeredWrapper{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+
+.selectButton{
+  display:flex;
+  flex-shrink:0;
+  justify-content:flex-end;
+  margin-left:auto;
+}
+@charset "UTF-8";
+.stateLayer{
+  visibility:initial;
+}
+
+.listItem{
+  cursor:pointer;
+  position:relative;
+  z-index:1;
+  display:flex;
+  flex-direction:row;
+  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+  align-items:flex-start;
+  box-sizing:border-box;
+  width:-moz-max-content;
+  width:max-content;
+  min-width:100%;
+  margin:0;
+  padding:var(--sn-primitive-dimension-0, 0px) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
+  border:none;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
+  text-align:start;
+  -webkit-appearance:unset;
+     -moz-appearance:unset;
+          appearance:unset;
+  background-color:transparent;
+  outline:none;
+}
+.listItem[data-level-one], .listItem[data-level-more-one]{
+  padding-left:calc(var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px))))) + var(--level, 0) * var(--sn-list-anatomy-size-s-listItem-nestingLevel-paddingLeft, var(--sn-density-nestingLevel-s-paddingLeft, var(--sn-platform-comfort-icon-half-xs, var(--sn-primitive-dimension-12, 12px)))) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))))));
+}
+.listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.listItem[data-non-pointer]{
+  cursor:inherit;
+}
+
+.marker{
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  bottom:0;
+  left:0;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:var(--sn-list-anatomy-size-s-listItem-markerWrapper-width, var(--sn-primitive-dimension-2, 2px));
+  min-width:var(--sn-list-anatomy-size-s-listItem-markerWrapper-width, var(--sn-primitive-dimension-2, 2px));
+  max-width:var(--sn-list-anatomy-size-s-listItem-markerWrapper-width, var(--sn-primitive-dimension-2, 2px));
+  padding-top:var(--sn-list-anatomy-size-s-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-2, 2px));
+  padding-bottom:var(--sn-list-anatomy-size-s-listItem-markerWrapper-marker-paddingVertical, var(--sn-primitive-dimension-2, 2px));
+}
+.marker::before{
+  content:"";
+  flex:1 0 0;
+  width:100%;
+  min-width:var(--sn-primitive-dimension-0, 0px);
+  height:100%;
+  border-top-right-radius:var(--sn-list-anatomy-size-s-listItem-markerWrapper-borderTopRightRadius, var(--sn-primitive-dimension-2, 2px));
+  border-bottom-right-radius:var(--sn-list-anatomy-size-s-listItem-markerWrapper-borderBottomRightRadius, var(--sn-primitive-dimension-2, 2px));
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
+}
+.marker[data-disabled]{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.marker[data-disabled]::before{
+  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
+}
+
+.checkbox{
+  display:flex;
+  flex-shrink:0;
+  align-items:flex-start;
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+
+.expandCenteredWrapper{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0px);
+}
+
+.groupIndicator{
+  pointer-events:none;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
+  fill:currentcolor;
+}
+.groupIndicator svg{
+  width:100%;
+  max-width:100%;
+  height:100%;
+  max-height:100%;
+}
+.groupIndicator[data-interactive]{
+  pointer-events:auto;
+  cursor:pointer;
+}
+.groupIndicator[data-open]{
+  border-radius:var(--sn-density-radius-s, var(--sn-platform-comfort-radius-s, var(--sn-primitive-dimension-12, 12px)));
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
+}
+.groupIndicator[data-disabled]{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+
+.itemWrapper{
+  position:relative;
+  z-index:0;
+  min-width:100%;
+  margin:0;
+  padding:0;
+  border-radius:var(--sn-list-anatomy-size-s-listItem-borderRadius, var(--sn-brand-anatomy-radius-listItem-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.itemWrapper .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.itemWrapper .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.itemWrapper .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
+}
+.itemWrapper .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
+}
+.itemWrapper .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.itemWrapper .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.itemWrapper .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.itemWrapper .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.itemWrapper .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .itemWrapper:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.itemWrapper{
+}
+.itemWrapper[data-loading] .stateLayer[data-state=borderOnBackground], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=activatedOnBackground], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=versionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyVersionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=inversionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyInversionOnColor], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.itemWrapper[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .itemWrapper:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .itemWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.itemWrapper[data-disabled], .itemWrapper:disabled{
+  cursor:not-allowed;
+  background-color:transparent;
+  outline:none;
+}
+.itemWrapper[data-disabled] .listItem, .itemWrapper:disabled .listItem{
+  cursor:not-allowed;
+}
+.itemWrapper:not([data-inactive], [data-disabled])[data-open] .stateLayer[data-state=emptyNeutralOnBackground], .itemWrapper:not([data-inactive], [data-disabled])[data-focused] .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
+}
+.itemWrapper:not([data-inactive], [data-disabled])[data-open] .stateLayer[data-state=activatedOnBackground], .itemWrapper:not([data-inactive], [data-disabled])[data-focused] .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
+}
+.itemWrapper:not([data-inactive], [data-disabled]):active .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
+}
+.itemWrapper:not([data-inactive], [data-disabled]):active .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
+}
+.itemWrapper[data-inactive]:hover .stateLayer[data-state=emptyNeutralOnBackground],
+.itemWrapper[data-inactive]:hover .stateLayer[data-state=activatedOnBackground],
+.itemWrapper[data-inactive]:active .stateLayer[data-state=emptyNeutralOnBackground],
+.itemWrapper[data-inactive]:active .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 0)));
+}
+.itemWrapper[data-checked][data-selection-mode=single]:not([data-disabled]) .listItem:focus-visible{
+  outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
+}
+.root{
+  position:relative;
+  display:flex;
+  gap:var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-width:100%;
+  padding:var(--sn-list-anatomy-size-s-subtitle-paddingTop, var(--sn-primitive-dimension-8, 8px)) var(--sn-primitive-dimension-8, 8px) var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
+}
+.root:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.root[data-level-one], .root[data-level-more-one]{
+  padding-left:calc(var(--sn-primitive-dimension-8, 8px) + var(--level, 0) * var(--sn-list-anatomy-size-s-listItem-nestingLevel-paddingLeft, var(--sn-density-nestingLevel-s-paddingLeft, var(--sn-platform-comfort-icon-half-xs, var(--sn-primitive-dimension-12, 12px)))) + var(--sn-list-anatomy-size-s-listItem-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))))));
+}
+
+.dividerOnly{
+  display:flex;
+  align-items:flex-end;
+  box-sizing:border-box;
+  width:100%;
+  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-primitive-dimension-8, 8px);
+}
+
+.divider{
+  position:absolute;
+  top:0;
+  right:0;
+  left:0;
+  width:auto;
+  min-width:0;
+}
 .logoImg{
   width:auto;
   min-height:var(--sn-primitive-dimension-24, 24px);