@cloud-ru/ds-tree 1.0.0

package/dist/esm/hooks/useTreeMultiSelection.js

@@ -0,0 +1,34 @@
+import { applySelectionDiff, useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback } from 'react';
+/**
+ * Хук мультивыбора для дерева.
+ *
+ * Выполняет пересчет выбранных id после клика по узлу, поддерживает
+ * controlled/uncontrolled режим (`selected` + `onChangeSelected`) и при необходимости
+ * подгружает детей узла перед вычислением итогового выбора.
+ *
+ * @param params Параметры управления выбором и подгрузкой данных.
+ * @returns Текущий список выбранных id и обработчик выбора узла.
+ */
+export function useTreeMultiSelection({ onDataLoad, onSelect: onSelectProp, selected, onChangeSelected, }) {
+    const [selectedIds = [], setSelectedIds] = useValueControl({
+        value: selected,
+        defaultValue: [],
+        onChange: onChangeSelected,
+    });
+    const onSelect = useCallback(async (selectedKeys, node) => {
+        const isSelected = selectedKeys.includes(node.id);
+        const clonedNode = { ...node };
+        if (node.nested && !node.nested.length) {
+            const { preloadedChildren } = await onDataLoad(node);
+            clonedNode.nested = preloadedChildren;
+        }
+        const { added, removed } = onSelectProp({ selectedKeys, node: clonedNode, isSelected });
+        const updatedSelectedIds = applySelectionDiff(selectedIds, added, removed);
+        setSelectedIds(updatedSelectedIds);
+    }, [onDataLoad, onSelectProp, selectedIds, setSelectedIds]);
+    return {
+        selected: selectedIds,
+        onSelect,
+    };
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,17 @@
+export * from './components/index.js';
+export * from './constants.js';
+export { checkNestedNodesSelection } from './helpers/checkNestedNodesSelection.js';
+export { collectEmptyNestedNodesInExpanded } from './helpers/collectEmptyNestedNodesInExpanded.js';
+export { collectIds } from './helpers/collectIds.js';
+export { extractTreeNodeTitle } from './helpers/extractTreeNodeTitle.js';
+export { findAllChildNodeIds } from './helpers/findAllChildNodeIds.js';
+export { findAllExpandedChildNodeIds } from './helpers/findAllExpandedChildNodeIds.js';
+export { getSearchedTreeItems } from './helpers/getSearchedTreeItems.js';
+export { getSearchedTreeNodeById } from './helpers/getSearchedTreeNodeById.js';
+export { lookupTreeForSelectedNodes } from './helpers/lookupTreeForSelectedNodes.js';
+export { sortTreeItemsByTitle } from './helpers/sortTreeItemsByTitle.js';
+export { traverse } from './helpers/traverse.js';
+export { traverseWithTarget } from './helpers/traverseWithTarget.js';
+export { updateTreeNode } from './helpers/updateTreeNode.js';
+export * from './hooks/index.js';
+export * from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,17 @@
+export * from './components/index.js';
+export * from './constants.js';
+export { checkNestedNodesSelection } from './helpers/checkNestedNodesSelection.js';
+export { collectEmptyNestedNodesInExpanded } from './helpers/collectEmptyNestedNodesInExpanded.js';
+export { collectIds } from './helpers/collectIds.js';
+export { extractTreeNodeTitle } from './helpers/extractTreeNodeTitle.js';
+export { findAllChildNodeIds } from './helpers/findAllChildNodeIds.js';
+export { findAllExpandedChildNodeIds } from './helpers/findAllExpandedChildNodeIds.js';
+export { getSearchedTreeItems } from './helpers/getSearchedTreeItems.js';
+export { getSearchedTreeNodeById } from './helpers/getSearchedTreeNodeById.js';
+export { lookupTreeForSelectedNodes } from './helpers/lookupTreeForSelectedNodes.js';
+export { sortTreeItemsByTitle } from './helpers/sortTreeItemsByTitle.js';
+export { traverse } from './helpers/traverse.js';
+export { traverseWithTarget } from './helpers/traverseWithTarget.js';
+export { updateTreeNode } from './helpers/updateTreeNode.js';
+export * from './hooks/index.js';
+export * from './types.js';

package/dist/esm/style.css

@@ -0,0 +1,565 @@
+.tree{
+  box-sizing:border-box;
+  min-width:0;
+  height:100%;
+}
+.tree[data-size=s]{
+  --tree-line-width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  --tree-item-gap:var(--sn-tree-anatomy-size-s-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.tree[data-size=m]{
+  --tree-line-width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  --tree-item-gap:var(--sn-tree-anatomy-size-m-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.tree[data-size=l]{
+  --tree-line-width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  --tree-item-gap:var(--sn-tree-anatomy-size-l-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+}
+.expandableTreeNode{
+  position:relative;
+  width:100%;
+}
+
+.expandableContent{
+  overflow:visible hidden;
+  display:flex;
+  gap:var(--tree-item-gap);
+  box-sizing:border-box;
+  min-width:0;
+  min-height:0;
+  visibility:hidden;
+  transition:visibility 200ms;
+}
+
+.expandableWrap{
+  overflow:visible hidden;
+  display:grid;
+  grid-template-rows:0fr;
+  box-sizing:border-box;
+  width:100%;
+  transition:grid-template-rows 200ms;
+}
+.expandableWrap[data-expanded=true]{
+  overflow:unset;
+  grid-template-rows:1fr;
+}
+.expandableWrap[data-expanded=true] .expandableContent{
+  overflow:unset;
+  visibility:visible;
+}
+
+.expandableNested{
+  width:100%;
+  min-width:0;
+}
+.treeLine{
+  pointer-events:none;
+  position:relative;
+  flex-shrink:0;
+  width:var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  visibility:hidden;
+}
+.treeLine[data-visible]{
+  visibility:visible;
+}
+.treeLine[data-visible]::after{
+  content:"";
+  position:absolute;
+  top:0;
+  left:50%;
+  transform:translateX(-50%);
+  width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+  height:100%;
+  background:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}
+.treeLine[data-horizontal]{
+  box-sizing:border-box;
+}
+.treeLine[data-horizontal]::after{
+  top:50%;
+  left:calc(-50% - var(--tree-item-gap, 0px));
+  transform:translateY(-50%);
+  width:calc(150% + var(--tree-item-gap, 0px));
+  height:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.treeLine[data-horizontal][data-half-width]{
+  width:0;
+}
+.treeLine[data-horizontal][data-half-width]::after{
+  left:calc(0px - var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2 - var(--tree-item-gap, 0px));
+  width:calc(var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2 + var(--tree-item-gap, 0px));
+}
+@charset "UTF-8";
+.treeNode{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+
+.treeNodeIcon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.treeNodeTitle{
+  overflow:hidden;
+  display:flex;
+  flex-grow:1;
+  align-items:center;
+  box-sizing:border-box;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.treeNodeActions{
+  position:absolute;
+  inset:0 0 0 auto;
+  display:flex;
+  visibility:hidden;
+}
+.treeNodeActions > button{
+  align-self:stretch;
+  height:auto;
+}
+.treeNodeActions:focus-visible, .treeNodeActions[data-focused]{
+  visibility:visible;
+}
+
+.treeNodeContent{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  min-width:0;
+}
+.treeNodeContent .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.treeNodeContent .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(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.treeNodeContent .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(120, 123, 138, 0)));
+}
+.treeNodeContent .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.treeNodeContent .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.treeNodeContent .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.treeNodeContent .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.treeNodeContent .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.treeNodeContent .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .treeNodeContent: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(159, 166, 198, 0.6509803922)));
+  }
+  .treeNodeContent: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(188, 195, 220, 0.1490196078)));
+  }
+  .treeNodeContent: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, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .treeNodeContent: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));
+  }
+  .treeNodeContent: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));
+  }
+  .treeNodeContent: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));
+  }
+  .treeNodeContent: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));
+  }
+  .treeNodeContent: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));
+  }
+}
+.treeNodeContent{
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=borderOnBackground], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .treeNodeContent[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(159, 166, 198, 0.8)));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .treeNodeContent[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(188, 195, 220, 0.3019607843)));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=activatedOnBackground], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .treeNodeContent[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, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=versionOnColor], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .treeNodeContent[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));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=emptyVersionOnColor], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .treeNodeContent[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));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=inversionOnColor], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .treeNodeContent[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));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=emptyInversionOnColor], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .treeNodeContent[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));
+}
+.treeNodeContent[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .treeNodeContent:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .treeNodeContent[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));
+}
+.treeNodeContent:hover .treeNodeActions, .treeNodeContent[data-droplist-active] .treeNodeActions{
+  visibility:visible;
+}
+.treeNodeContent[data-droplist-active] .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(188, 195, 220, 0.1490196078)));
+}
+.treeNodeContent[data-droplist-active] .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+}
+.treeNodeContent:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+.treeNodeContent[aria-selected=true]:focus-visible{
+  outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.treeNodeContent[data-multiselect]{
+  cursor:default;
+}
+.treeNodeContent[aria-disabled=true]{
+  cursor:not-allowed;
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+
+.stateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.treeNodeCheckboxWrap{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+
+.treeNodeExpandButton{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  padding:0;
+  border:0;
+  border-radius:var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px));
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  background:transparent;
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[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(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.treeNodeExpandButton .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[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(159, 166, 198, 0.6509803922)));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .treeNodeExpandButton:hover:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.treeNodeExpandButton{
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=borderOnBackground], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=borderOnBackground], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[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(159, 166, 198, 0.8)));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=versionOnColor], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=inversionOnColor], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=inversionOnColor], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.treeNodeExpandButton[data-loading] .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent], .treeNodeExpandButton:active:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent], .treeNodeExpandButton[data-pressed=true]:not([data-disabled], [data-loading]) .treeNodeExpandButtonStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.treeNodeExpandButton svg{
+  transition:transform 0.2s ease;
+}
+.treeNodeExpandButton[data-expanded] svg{
+  transform:rotate(90deg);
+}
+.treeNodeExpandButton:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+
+.treeNodeExpandButtonStateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.treeNodeExpandButtonSpacer{
+  flex-shrink:0;
+}
+
+.treeNodeExpandButtonWrapper{
+  position:relative;
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  flex-shrink:0;
+  align-items:center;
+  align-self:stretch;
+  justify-content:center;
+}
+
+.treeNodeExpandButtonWrapper > :last-child:not(.treeNodeExpandButton){
+  pointer-events:none;
+  position:absolute;
+  right:0;
+  bottom:0;
+  left:0;
+  width:100%;
+  height:calc(50% - var(--tree-chevron-size, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2);
+}
+
+.treeNodeLink{
+  display:block;
+  width:100%;
+  color:inherit;
+  text-decoration:none;
+}
+
+.treeNode[data-size=s]{
+  --tree-chevron-size:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=s] .treeNodeContent{
+  border-radius:var(--sn-tree-anatomy-size-s-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+  padding-top:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  gap:var(--sn-tree-anatomy-size-s-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-left:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  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-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-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));
+}
+.treeNode[data-size=s] .treeNodeCheckboxWrap,
+.treeNode[data-size=s] .treeNodeExpandButtonWrapper{
+  width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=s] .treeNodeIcon,
+.treeNode[data-size=s] .treeNodeCheckboxWrap{
+  padding-top:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.treeNode[data-size=s] .treeNodeExpandButton{
+  width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=s] .treeNodeExpandButton > svg{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=s] .treeNodeExpandButtonSpacer{
+  width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=s] .treeNodeIcon svg{
+  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=s] .treeNodeActions{
+  margin-top:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))));
+  margin-right:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))));
+  margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-s-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))));
+}
+
+.treeNode[data-size=m]{
+  --tree-chevron-size:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=m] .treeNodeContent{
+  padding-top:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  gap:var(--sn-tree-anatomy-size-m-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  border-radius:var(--sn-tree-anatomy-size-m-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.treeNode[data-size=m] .treeNodeCheckboxWrap,
+.treeNode[data-size=m] .treeNodeExpandButtonWrapper{
+  width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=m] .treeNodeIcon,
+.treeNode[data-size=m] .treeNodeCheckboxWrap{
+  padding-top:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.treeNode[data-size=m] .treeNodeExpandButton{
+  width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=m] .treeNodeExpandButton > svg{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=m] .treeNodeExpandButtonSpacer{
+  width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=m] .treeNodeIcon svg{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=m] .treeNodeActions{
+  margin-top:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))));
+  margin-right:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))));
+  margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-m-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))));
+}
+
+.treeNode[data-size=l]{
+  --tree-chevron-size:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=l] .treeNodeContent{
+  gap:var(--sn-tree-anatomy-size-l-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  border-radius:var(--sn-tree-anatomy-size-l-treeItem-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-top:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.treeNode[data-size=l] .treeNodeCheckboxWrap,
+.treeNode[data-size=l] .treeNodeExpandButtonWrapper{
+  width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=l] .treeNodeIcon,
+.treeNode[data-size=l] .treeNodeCheckboxWrap{
+  padding-top:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+}
+.treeNode[data-size=l] .treeNodeExpandButton{
+  width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=l] .treeNodeExpandButton > svg{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=l] .treeNodeExpandButtonSpacer{
+  width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.treeNode[data-size=l] .treeNodeIcon svg{
+  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+  max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
+}
+.treeNode[data-size=l] .treeNodeActions{
+  margin-top:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))));
+  margin-right:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))));
+  margin-bottom:calc(-1 * var(--sn-tree-anatomy-size-l-treeItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))));
+}