@mantine/core 9.1.1 → 9.2.0

package/lib/components/TagsInput/TagsInput.d.ts

@@ -54,6 +54,8 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<Combobo
     isDuplicate?: (value: string, currentValues: string[]) => boolean;
     /** If set, the dropdown opens when the input receives focus @default true */
     openOnFocus?: boolean;
+    /** If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */
+    withPillsReorder?: boolean;
 }
 export type TagsInputFactory = Factory<{
     props: TagsInputProps;

package/lib/components/TreeSelect/TreeSelect.d.ts

@@ -0,0 +1,124 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
+import { ComboboxLikeStylesNames } from '../Combobox';
+import { __BaseInputProps, __InputStylesNames, ClearSectionMode, InputClearButtonProps, InputVariant } from '../Input';
+import { ScrollAreaProps } from '../ScrollArea';
+import type { TreeNodeData } from '../Tree';
+import { CheckedStrategy } from './get-checked-values-by-strategy';
+import { TreeSelectChevronAriaLabels, TreeSelectRenderNodePayload } from './TreeSelectOption';
+export type TreeSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
+export type TreeSelectMode = 'single' | 'multiple' | 'checkbox';
+export type TreeSelectValue<Mode extends TreeSelectMode> = Mode extends 'single' ? string | null : string[];
+export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> extends BoxProps, __BaseInputProps, StylesApiProps<TreeSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
+    /** Tree data */
+    data: TreeNodeData[];
+    /** Selection mode: 'single', 'multiple', or 'checkbox' (with cascade) @default 'single' */
+    mode?: Mode;
+    /** Controlled value */
+    value?: TreeSelectValue<Mode>;
+    /** Default value */
+    defaultValue?: TreeSelectValue<Mode>;
+    /** Called when value changes */
+    onChange?: (value: TreeSelectValue<Mode>) => void;
+    /** Disables parent-child cascade in checkbox mode @default false */
+    checkStrictly?: boolean;
+    /** Controls which checked nodes appear in value/pills in checkbox mode @default 'child' */
+    checkedStrategy?: CheckedStrategy;
+    /** Default expanded node values */
+    defaultExpandedValues?: string[];
+    /** Expand all nodes by default @default false */
+    defaultExpandAll?: boolean;
+    /** Controlled expanded state */
+    expandedValues?: string[];
+    /** Called when expanded state changes */
+    onExpandedChange?: (values: string[]) => void;
+    /** Also toggle expand when clicking a parent node (not just the chevron). In `single` and `multiple` modes, parent clicks only expand; only leaves can be selected. In `checkbox` mode, parent clicks both check and expand. @default false */
+    expandOnClick?: boolean;
+    /** Enables search filtering @default false */
+    searchable?: boolean;
+    /** Controlled search value */
+    searchValue?: string;
+    /** Default search value */
+    defaultSearchValue?: string;
+    /** Called when search changes */
+    onSearchChange?: (value: string) => void;
+    /** Custom filter function */
+    filter?: (query: string, node: TreeNodeData) => boolean;
+    /** Message when no nodes match search */
+    nothingFoundMessage?: React.ReactNode;
+    /** Allows deselecting in single mode @default true */
+    allowDeselect?: boolean;
+    /** Shows clear button @default false */
+    clearable?: boolean;
+    /** Determines how the clear button and rightSection are rendered @default 'both' */
+    clearSectionMode?: ClearSectionMode;
+    /** Props for the clear button */
+    clearButtonProps?: InputClearButtonProps;
+    /** Maximum selectable values (multiple/checkbox mode) */
+    maxValues?: number;
+    /** Maximum displayed pills before "+N more" */
+    maxDisplayedValues?: number;
+    /** Content shown when values overflow maxDisplayedValues */
+    maxDisplayedValuesContent?: React.ReactNode | ((overflow: number) => React.ReactNode);
+    /** Called with removed value in multiple/checkbox mode */
+    onRemove?: (value: string) => void;
+    /** Called when clear button is clicked */
+    onClear?: () => void;
+    /** Custom node rendering in the dropdown */
+    renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
+    /** Show tree connection lines between parent and child nodes @default true */
+    withLines?: boolean;
+    /** Props for the hidden input */
+    hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
+    /** Divider for hidden input values @default ',' */
+    hiddenInputValuesDivider?: string;
+    /** Props for the ScrollArea in the dropdown */
+    scrollAreaProps?: ScrollAreaProps;
+    /** Controls the default chevron color */
+    chevronColor?: MantineColor;
+    /** Max dropdown height @default 220 */
+    maxDropdownHeight?: number | string;
+    /** Controlled dropdown state */
+    dropdownOpened?: boolean;
+    /** Default dropdown state */
+    defaultDropdownOpened?: boolean;
+    /** Called when dropdown opens */
+    onDropdownOpen?: () => void;
+    /** Called when dropdown closes */
+    onDropdownClose?: () => void;
+    /** Props passed to the underlying Combobox */
+    comboboxProps?: Record<string, any>;
+    /** Clear search on selection change @default true */
+    clearSearchOnChange?: boolean;
+    /** Opens dropdown on focus (searchable mode) @default true */
+    openOnFocus?: boolean;
+    /** aria-label values for the expand/collapse chevron button */
+    chevronAriaLabels?: TreeSelectChevronAriaLabels;
+}
+export type TreeSelectFactory = Factory<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = 'single'>(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}>;
+export declare const TreeSelect: (<Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element) & import("../..").ThemeExtend<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}> & import("../..").ComponentClasses<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}> & Record<string, never> & import("../..").FactoryComponentWithProps<{
+    props: TreeSelectProps;
+    ref: HTMLInputElement;
+    stylesNames: TreeSelectStylesNames;
+    variant: InputVariant;
+    signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
+}> & {
+    displayName?: string;
+};

package/lib/components/TreeSelect/TreeSelectOption.d.ts

@@ -0,0 +1,36 @@
+import type { TreeNodeData } from '../Tree';
+export interface TreeSelectChevronAriaLabels {
+    /** aria-label for the expand button when the node is collapsed @default 'Expand' */
+    expand?: string;
+    /** aria-label for the expand button when the node is expanded @default 'Collapse' */
+    collapse?: string;
+}
+export interface TreeSelectOptionProps {
+    node: TreeNodeData;
+    level: number;
+    expanded: boolean;
+    hasChildren: boolean;
+    selected: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    showCheckbox: boolean;
+    isLastChild: boolean;
+    lineGuides: boolean[];
+    withLines: boolean;
+    onToggleExpand: (value: string) => void;
+    renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
+    chevronAriaLabels?: TreeSelectChevronAriaLabels;
+}
+export interface TreeSelectRenderNodePayload {
+    node: TreeNodeData;
+    level: number;
+    expanded: boolean;
+    hasChildren: boolean;
+    selected: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+}
+export declare function TreeSelectOption({ node, level, expanded, hasChildren, selected, checked, indeterminate, showCheckbox, isLastChild, lineGuides, withLines, onToggleExpand, renderNode, chevronAriaLabels, }: TreeSelectOptionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TreeSelectOption {
+    var displayName: string;
+}

package/lib/components/TreeSelect/flatten-tree-select-data.d.ts

@@ -0,0 +1,12 @@
+import type { TreeNodeData } from '../Tree';
+import type { TreeExpandedState } from '../Tree/use-tree';
+export interface TreeSelectFlatNode {
+    node: TreeNodeData;
+    level: number;
+    parent: string | null;
+    hasChildren: boolean;
+    expanded: boolean;
+    isLastChild: boolean;
+    lineGuides: boolean[];
+}
+export declare function flattenTreeSelectData(data: TreeNodeData[], expandedState: TreeExpandedState): TreeSelectFlatNode[];

package/lib/components/TreeSelect/get-checked-values-by-strategy.d.ts

@@ -0,0 +1,4 @@
+import type { TreeNodeData } from '../Tree';
+export type CheckedStrategy = 'all' | 'parent' | 'child';
+export declare function expandToLeafChecked(value: string[], data: TreeNodeData[]): string[];
+export declare function checkedToValue(checkedState: string[], data: TreeNodeData[], strategy: CheckedStrategy): string[];

package/lib/components/TreeSelect/index.d.ts

@@ -0,0 +1,13 @@
+import type { TreeSelectFactory, TreeSelectMode, TreeSelectProps, TreeSelectStylesNames, TreeSelectValue } from './TreeSelect';
+export { TreeSelect } from './TreeSelect';
+export { TreeSelectOption } from './TreeSelectOption';
+export type { TreeSelectChevronAriaLabels, TreeSelectRenderNodePayload } from './TreeSelectOption';
+export type { CheckedStrategy } from './get-checked-values-by-strategy';
+export type { TreeSelectProps, TreeSelectStylesNames, TreeSelectFactory, TreeSelectMode, TreeSelectValue, };
+export declare namespace TreeSelect {
+    type Props = TreeSelectProps;
+    type StylesNames = TreeSelectStylesNames;
+    type Factory = TreeSelectFactory;
+    type Mode = TreeSelectMode;
+    type Value<Mode extends TreeSelectMode> = TreeSelectValue<Mode>;
+}

package/lib/components/index.d.ts

@@ -79,6 +79,7 @@ export * from './Portal';
 export * from './Progress';
 export * from './Radio';
 export * from './Rating';
+export * from './RollingNumber';
 export * from './RingProgress';
 export * from './Scroller';
 export * from './SegmentedControl';
@@ -105,4 +106,5 @@ export * from './Title';
 export * from './Tooltip';
 export * from './Transition';
 export * from './Tree';
+export * from './TreeSelect';
 export * from './Typography';

package/lib/core/MantineProvider/use-props/use-props.d.ts

@@ -1,3 +1,3 @@
-export declare function useProps<T extends Record<string, any>, U extends Partial<T> | null = {}>(component: string, defaultProps: U, props: T): T & (U extends null | undefined ? {} : {
+export declare function useProps<T extends Record<string, any>, U extends Partial<T> | null = {}>(component: string | (string | undefined)[], defaultProps: U, props: T): T & (U extends null | undefined ? {} : {
     [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.1.1",
+  "version": "9.2.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.1.1",
+    "@mantine/hooks": "9.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles/Pill.css

@@ -26,6 +26,7 @@
   user-select: none;
   -webkit-user-select: none;
   max-width: 100%;
+  position: relative;
 }
 
   :where([data-mantine-color-scheme='dark']) .m_7cda1cd6 {
@@ -45,6 +46,40 @@
     cursor: not-allowed;
   }
 
+  .m_7cda1cd6:where([draggable='true']) {
+    cursor: grab;
+  }
+
+  .m_7cda1cd6:where([draggable='true']):focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 2px;
+  }
+
+  .m_7cda1cd6:where([data-dragging]) {
+    opacity: 0.4;
+    cursor: grabbing;
+  }
+
+  .m_7cda1cd6:where([data-drag-over='before'])::before,
+  .m_7cda1cd6:where([data-drag-over='after'])::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: calc(0.125rem * var(--mantine-scale));
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .m_7cda1cd6:where([data-drag-over='before'])::before {
+    inset-inline-start: calc(-0.25rem * var(--mantine-scale));
+  }
+
+  .m_7cda1cd6:where([data-drag-over='after'])::after {
+    inset-inline-end: calc(-0.25rem * var(--mantine-scale));
+  }
+
 :where([data-mantine-color-scheme='light']) .m_44da308b {
     background-color: var(--mantine-color-gray-1);
 }

package/styles/Pill.layer.css

@@ -26,6 +26,7 @@
   user-select: none;
   -webkit-user-select: none;
   max-width: 100%;
+  position: relative;
 }
 
   :where([data-mantine-color-scheme='dark']) .m_7cda1cd6 {
@@ -45,6 +46,40 @@
     cursor: not-allowed;
   }
 
+  .m_7cda1cd6:where([draggable='true']) {
+    cursor: grab;
+  }
+
+  .m_7cda1cd6:where([draggable='true']):focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: 2px;
+  }
+
+  .m_7cda1cd6:where([data-dragging]) {
+    opacity: 0.4;
+    cursor: grabbing;
+  }
+
+  .m_7cda1cd6:where([data-drag-over='before'])::before,
+  .m_7cda1cd6:where([data-drag-over='after'])::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: calc(0.125rem * var(--mantine-scale));
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .m_7cda1cd6:where([data-drag-over='before'])::before {
+    inset-inline-start: calc(-0.25rem * var(--mantine-scale));
+  }
+
+  .m_7cda1cd6:where([data-drag-over='after'])::after {
+    inset-inline-end: calc(-0.25rem * var(--mantine-scale));
+  }
+
 :where([data-mantine-color-scheme='light']) .m_44da308b {
     background-color: var(--mantine-color-gray-1);
 }

package/styles/RollingNumber.css

@@ -0,0 +1,60 @@
+.m_47dd3981 {
+  display: inline-flex;
+  align-items: baseline;
+  overflow: hidden;
+}
+
+  .m_47dd3981[data-tabular-numbers] {
+    font-variant-numeric: tabular-nums;
+  }
+
+.m_b301d46e {
+  display: inline-block;
+  width: 1ch;
+  height: 1em;
+  overflow: hidden;
+  line-height: 1;
+  transition:
+    width var(--rn-duration) var(--rn-timing-function),
+    opacity var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_b301d46e[data-empty] {
+    width: 0;
+    opacity: 0;
+  }
+
+.m_8ae40964 {
+  display: flex;
+  flex-direction: column;
+  animation: m_18d73873 var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_8ae40964 > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1em;
+  }
+
+.m_47d64bf5 {
+  display: inline-block;
+  overflow: hidden;
+  white-space: pre;
+  transition: opacity var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_47d64bf5[data-empty] {
+    width: 0;
+    opacity: 0;
+  }
+
+@keyframes m_18d73873 {
+  from {
+    transform: var(--rn-roll-from);
+  }
+
+  to {
+    transform: var(--rn-roll-to);
+  }
+}

package/styles/RollingNumber.layer.css

@@ -0,0 +1,61 @@
+@layer mantine {.m_47dd3981 {
+  display: inline-flex;
+  align-items: baseline;
+  overflow: hidden;
+}
+
+  .m_47dd3981[data-tabular-numbers] {
+    font-variant-numeric: tabular-nums;
+  }
+
+.m_b301d46e {
+  display: inline-block;
+  width: 1ch;
+  height: 1em;
+  overflow: hidden;
+  line-height: 1;
+  transition:
+    width var(--rn-duration) var(--rn-timing-function),
+    opacity var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_b301d46e[data-empty] {
+    width: 0;
+    opacity: 0;
+  }
+
+.m_8ae40964 {
+  display: flex;
+  flex-direction: column;
+  animation: m_18d73873 var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_8ae40964 > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1em;
+  }
+
+.m_47d64bf5 {
+  display: inline-block;
+  overflow: hidden;
+  white-space: pre;
+  transition: opacity var(--rn-duration) var(--rn-timing-function);
+}
+
+.m_47d64bf5[data-empty] {
+    width: 0;
+    opacity: 0;
+  }
+
+@keyframes m_18d73873 {
+  from {
+    transform: var(--rn-roll-from);
+  }
+
+  to {
+    transform: var(--rn-roll-to);
+  }
+}
+}

package/styles/TreeSelect.css

@@ -0,0 +1,113 @@
+.m_529d33e8 {
+  --ts-level-offset: 20px;
+  --ts-line-width: calc(0.0625rem * var(--mantine-scale));
+  --ts-line-color: var(--mantine-color-default-border);
+  --ts-option-padding-y: 4px;
+  --ts-option-padding-x: 8px;
+}
+
+.m_28bb748 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+  padding: var(--ts-option-padding-y) var(--ts-option-padding-x);
+  padding-inline-start: var(--ts-option-padding-x);
+}
+
+.m_aa3e3f86 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --_ts-expand-icon-size: calc(1.45 * var(--combobox-option-fz, var(--mantine-font-size-sm)));
+  width: var(--_ts-expand-icon-size);
+  min-width: var(--_ts-expand-icon-size);
+  height: var(--_ts-expand-icon-size);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+  color: var(--mantine-color-dimmed);
+  transform: rotate(-90deg);
+}
+
+:where([data-combobox-selected]) .m_aa3e3f86 {
+    color: var(--mantine-color-white);
+  }
+
+:where([dir="rtl"]) .m_aa3e3f86 {
+    transform: rotate(90deg);
+}
+
+.m_aa3e3f86:where([data-expanded]) {
+    transform: rotate(0deg);
+  }
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:hover {
+      background-color: var(--mantine-color-gray-1);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:hover {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:active {
+      background-color: var(--mantine-color-gray-1);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:active {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_eaa4cdee {
+  opacity: 0.4;
+  width: 0.8em;
+  min-width: 0.8em;
+  height: 0.8em;
+  margin-inline-start: auto;
+}
+
+:where([data-combobox-selected]) .m_eaa4cdee {
+    opacity: 1;
+  }
+
+.m_ffe3a9c1 {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Tree lines */
+.m_57207d5d {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
+  pointer-events: none;
+}
+
+.m_41b9db0b {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
+  pointer-events: none;
+}
+
+.m_41b9db0b:where([data-last]) {
+    bottom: auto;
+    height: 50%;
+  }
+
+.m_1246e79 {
+  position: absolute;
+  top: 50%;
+  height: 0;
+  border-top: var(--ts-line-width) solid var(--ts-line-color);
+  pointer-events: none;
+}

package/styles/TreeSelect.layer.css

@@ -0,0 +1,114 @@
+@layer mantine {.m_529d33e8 {
+  --ts-level-offset: 20px;
+  --ts-line-width: calc(0.0625rem * var(--mantine-scale));
+  --ts-line-color: var(--mantine-color-default-border);
+  --ts-option-padding-y: 4px;
+  --ts-option-padding-x: 8px;
+}
+
+.m_28bb748 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+  padding: var(--ts-option-padding-y) var(--ts-option-padding-x);
+  padding-inline-start: var(--ts-option-padding-x);
+}
+
+.m_aa3e3f86 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --_ts-expand-icon-size: calc(1.45 * var(--combobox-option-fz, var(--mantine-font-size-sm)));
+  width: var(--_ts-expand-icon-size);
+  min-width: var(--_ts-expand-icon-size);
+  height: var(--_ts-expand-icon-size);
+  border-radius: var(--mantine-radius-sm);
+  cursor: pointer;
+  color: var(--mantine-color-dimmed);
+  transform: rotate(-90deg);
+}
+
+:where([data-combobox-selected]) .m_aa3e3f86 {
+    color: var(--mantine-color-white);
+  }
+
+:where([dir="rtl"]) .m_aa3e3f86 {
+    transform: rotate(90deg);
+}
+
+.m_aa3e3f86:where([data-expanded]) {
+    transform: rotate(0deg);
+  }
+
+@media (hover: hover) {
+    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:hover {
+      background-color: var(--mantine-color-gray-1);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:hover {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+    :where([data-mantine-color-scheme='light']) .m_aa3e3f86:active {
+      background-color: var(--mantine-color-gray-1);
+  }
+
+    :where([data-mantine-color-scheme='dark']) .m_aa3e3f86:active {
+      background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_eaa4cdee {
+  opacity: 0.4;
+  width: 0.8em;
+  min-width: 0.8em;
+  height: 0.8em;
+  margin-inline-start: auto;
+}
+
+:where([data-combobox-selected]) .m_eaa4cdee {
+    opacity: 1;
+  }
+
+.m_ffe3a9c1 {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Tree lines */
+.m_57207d5d {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
+  pointer-events: none;
+}
+
+.m_41b9db0b {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);
+  pointer-events: none;
+}
+
+.m_41b9db0b:where([data-last]) {
+    bottom: auto;
+    height: 50%;
+  }
+
+.m_1246e79 {
+  position: absolute;
+  top: 50%;
+  height: 0;
+  border-top: var(--ts-line-width) solid var(--ts-line-color);
+  pointer-events: none;
+}
+}