@mantine/core 9.0.0-alpha.4 → 9.0.0-alpha.5

package/lib/components/Tree/use-tree-node-drag-drop.d.ts

@@ -0,0 +1,18 @@
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { TreeDragState, TreeNodeData } from './Tree';
+interface UseTreeNodeDragDropInput {
+    nodeValue: string;
+    hasChildren: boolean;
+    data: TreeNodeData[];
+    onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
+    dragStateRef: React.RefObject<TreeDragState>;
+}
+export declare function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, }: UseTreeNodeDragDropInput): Record<string, never> | {
+    draggable: true;
+    onDragStart: (event: React.DragEvent) => void;
+    onDragOver: (event: React.DragEvent) => void;
+    onDragLeave: (event: React.DragEvent) => void;
+    onDrop: (event: React.DragEvent) => void;
+    onDragEnd: (event: React.DragEvent) => void;
+};
+export {};

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

@@ -0,0 +1,122 @@
+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 { 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) @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;
+}
+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,29 @@
+import type { TreeNodeData } from '../Tree';
+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;
+}
+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, }: 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 { 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/core/styles-api/use-styles/get-class-name/get-class-name.d.ts

@@ -13,8 +13,10 @@ export interface GetClassNameOptions {
     selector: string;
     /** Prefix for all class names, resolved by hook, `mantine` by default */
     classNamesPrefix: string;
-    /** `classNames` specified in the hook, only resolved `classNames[selector]` is added to the list */
-    classNames: _ClassNames;
+    /** Precomputed resolved `classNames` map (from the component `classNames` prop) */
+    resolvedClassNames: Partial<Record<string, string>>;
+    /** Precomputed resolved theme `classNames` maps (from `theme.components[name].classNames`) */
+    resolvedThemeClassNames: Partial<Record<string, string>>[];
     /** Classes object, usually imported from `*.module.css` */
     classes: Record<string, string>;
     /** Determines whether classes from `classes` should be added to the list */
@@ -23,9 +25,9 @@ export interface GetClassNameOptions {
     className: string | undefined;
     /** `rootSelector` specified in the hook, determines whether `className` should be added to the list */
     rootSelector: string;
-    /** Component props, used as context for `classNames` and `options.classNames` */
+    /** Component props, used as context for `options.classNames` */
     props: Record<string, any>;
-    /** Component styles context, used as context for `classNames` and `options.classNames` */
+    /** Component styles context, used as context for `options.classNames` */
     stylesCtx?: Record<string, any> | undefined;
     /** Determines whether static classes should be added */
     withStaticClasses?: boolean;
@@ -34,5 +36,5 @@ export interface GetClassNameOptions {
     /** `styles` prop transformed into classes with CSS-in-JS library, for example, emotion */
     transformedStyles?: Record<string, string>[];
 }
-export declare function getClassName({ theme, options, themeName, selector, classNamesPrefix, classNames, classes, unstyled, className, rootSelector, props, stylesCtx, withStaticClasses, headless, transformedStyles, }: GetClassNameOptions): string;
+export declare function getClassName({ theme, options, themeName, selector, classNamesPrefix, resolvedClassNames, resolvedThemeClassNames, classes, unstyled, className, rootSelector, props, stylesCtx, withStaticClasses, headless, transformedStyles, }: GetClassNameOptions): string;
 export {};

package/lib/core/styles-api/use-styles/get-style/get-style.d.ts

@@ -1,22 +1,18 @@
 import { CSSProperties } from 'react';
-import { MantineStyleProp } from '../../../Box';
 import { MantineTheme } from '../../../MantineProvider';
 import { GetStylesApiOptions } from '../../styles-api.types';
-import { VarsResolver } from './resolve-vars/resolve-vars';
 export type _Styles = undefined | Partial<Record<string, CSSProperties>> | ((theme: MantineTheme, props: Record<string, any>, ctx: Record<string, any> | undefined) => Partial<Record<string, CSSProperties>>);
 export interface GetStyleInput {
     theme: MantineTheme;
-    themeName: string[];
     selector: string;
     rootSelector: string;
     options: GetStylesApiOptions | undefined;
     props: Record<string, any>;
     stylesCtx: Record<string, any> | undefined;
-    styles: _Styles;
-    style: MantineStyleProp | undefined;
-    vars: VarsResolver | undefined;
-    varsResolver: VarsResolver | undefined;
-    headless?: boolean;
     withStylesTransform?: boolean;
+    resolvedStyles: Record<string, any>;
+    resolvedThemeStyles: Record<string, any>;
+    resolvedVars: Record<string, any>;
+    resolvedRootStyle: CSSProperties;
 }
-export declare function getStyle({ theme, themeName, selector, options, props, stylesCtx, rootSelector, styles, style, vars, varsResolver, headless, withStylesTransform, }: GetStyleInput): CSSProperties;
+export declare function getStyle({ theme, selector, options, props, stylesCtx, rootSelector, withStylesTransform, resolvedStyles, resolvedThemeStyles, resolvedVars, resolvedRootStyle, }: GetStyleInput): CSSProperties;

package/lib/core/styles-api/use-styles/use-transformed-styles.d.ts

@@ -1,9 +1,11 @@
+import { MantineTheme } from '../../MantineProvider';
 interface UseTransformedStylesInput {
     props: Record<string, any>;
     stylesCtx: Record<string, any> | undefined;
     themeName: string[];
+    theme: MantineTheme;
 }
-export declare function useStylesTransform({ props, stylesCtx, themeName }: UseTransformedStylesInput): {
+export declare function useStylesTransform({ props, stylesCtx, themeName, theme, }: UseTransformedStylesInput): {
     getTransformedStyles: (styles: any[]) => Record<string, string>[];
     withStylesTransform: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.0.0-alpha.4",
+  "version": "9.0.0-alpha.5",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,12 +43,12 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.0.0-alpha.4",
-    "react": "^18.x || ^19.x",
-    "react-dom": "^18.x || ^19.x"
+    "@mantine/hooks": "9.0.0-alpha.5",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
+    "@floating-ui/react": "^0.27.19",
     "clsx": "^2.1.1",
     "react-number-format": "^5.4.4",
     "react-remove-scroll": "^2.7.2",
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.1",
-    "react-dom": "19.2.1"
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
   }
 }

package/styles/RollingNumber.css

@@ -0,0 +1,50 @@
+.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;
+  transition: transform 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;
+  }

package/styles/RollingNumber.layer.css

@@ -0,0 +1,51 @@
+@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;
+  transition: transform 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;
+  }
+}

package/styles/Scroller.css

@@ -6,6 +6,7 @@
   align-items: center;
   position: relative;
   overflow: hidden;
+  max-width: 100%;
 }
 
 .m_ee44dece {

package/styles/Scroller.layer.css

@@ -6,6 +6,7 @@
   align-items: center;
   position: relative;
   overflow: hidden;
+  max-width: 100%;
 }
 
 .m_ee44dece {

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;
+}
+}