@mantine/core 7.15.3 → 7.16.1

package/lib/components/Autocomplete/Autocomplete.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxStringData, ComboboxStringItem } from '../Combobox';
-import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
+import { __BaseInputProps, __InputStylesNames, InputClearButtonProps, InputVariant } from '../Input';
 import { ScrollAreaProps } from '../ScrollArea';
 export type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;
 export interface AutocompleteProps extends BoxProps, __BaseInputProps, Omit<ComboboxLikeProps, 'data'>, StylesApiProps<AutocompleteFactory>, ElementProps<'input', 'onChange' | 'size'> {
@@ -16,6 +16,12 @@ export interface AutocompleteProps extends BoxProps, __BaseInputProps, Omit<Comb
     renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxStringItem>) => React.ReactNode;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     scrollAreaProps?: ScrollAreaProps;
+    /** Called when the clear button is clicked */
+    onClear?: () => void;
+    /** Props passed down to the clear button */
+    clearButtonProps?: InputClearButtonProps & ElementProps<'button'>;
+    /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */
+    clearable?: boolean;
 }
 export type AutocompleteFactory = Factory<{
     props: AutocompleteProps;

package/lib/components/CloseButton/CloseButton.d.ts

@@ -20,6 +20,7 @@ export interface __CloseButtonProps {
     icon?: React.ReactNode;
 }
 export interface CloseButtonProps extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {
+    __staticSelector?: string;
 }
 export type CloseButtonFactory = PolymorphicFactory<{
     props: CloseButtonProps;

package/lib/components/Combobox/ComboboxChevron/ComboboxChevron.d.ts

@@ -1,11 +1,12 @@
-import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../../core';
 export type ComboboxChevronStylesNames = 'chevron';
 export type ComboboxChevronCSSVariables = {
-    chevron: '--combobox-chevron-size';
+    chevron: '--combobox-chevron-size' | '--combobox-chevron-color';
 };
 export interface ComboboxChevronProps extends BoxProps, StylesApiProps<ComboboxChevronFactory>, ElementProps<'svg', 'opacity' | 'display'> {
     size?: MantineSize | (string & {});
     error?: React.ReactNode;
+    color?: MantineColor;
 }
 export type ComboboxChevronFactory = Factory<{
     props: ComboboxChevronProps;

package/lib/components/Combobox/ComboboxClearButton/ComboboxClearButton.d.ts

@@ -1,7 +1,6 @@
-import { ElementProps, MantineSize } from '../../../core';
-import { __CloseButtonProps } from '../../CloseButton';
-export interface ComboboxClearButtonProps extends __CloseButtonProps, ElementProps<'button'> {
-    size?: MantineSize | (string & {}) | number;
+import { ElementProps } from '../../../core';
+import { InputClearButtonProps } from '../../Input';
+export interface ComboboxClearButtonProps extends InputClearButtonProps, ElementProps<'button'> {
     onClear: () => void;
 }
 export declare const ComboboxClearButton: import("react").ForwardRefExoticComponent<ComboboxClearButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/components/Input/Input.context.d.ts

@@ -0,0 +1,9 @@
+import { MantineSize } from '../../core';
+interface InputContext {
+    size: MantineSize | (string & {});
+}
+export declare const InputContext: ({ children, value }: {
+    value: InputContext;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useInputContext: () => InputContext | null;
+export {};

package/lib/components/Input/Input.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
+import { InputClearButton } from './InputClearButton/InputClearButton';
 import { InputDescription } from './InputDescription/InputDescription';
 import { InputError } from './InputError/InputError';
 import { InputLabel } from './InputLabel/InputLabel';
@@ -51,6 +52,12 @@ export interface __InputProps {
     withErrorStyles?: boolean;
     /** `size` prop added to the input element */
     inputSize?: string;
+    /** Section to be displayed when the input is `__clearable` and `rightSection` is not defined */
+    __clearSection?: React.ReactNode;
+    /** Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined */
+    __clearable?: boolean;
+    /** Right section displayed when both `__clearSection` and `rightSection` are not defined */
+    __defaultRightSection?: React.ReactNode;
 }
 export interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {
     __staticSelector?: string;
@@ -79,6 +86,7 @@ export type InputFactory = PolymorphicFactory<{
         Description: typeof InputDescription;
         Placeholder: typeof InputPlaceholder;
         Wrapper: typeof InputWrapper;
+        ClearButton: typeof InputClearButton;
     };
 }>;
 export declare const Input: (<C = "input">(props: import("../../core").PolymorphicComponentProps<C, InputProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(InputProps & {
@@ -103,6 +111,7 @@ export declare const Input: (<C = "input">(props: import("../../core").Polymorph
         Description: typeof InputDescription;
         Placeholder: typeof InputPlaceholder;
         Wrapper: typeof InputWrapper;
+        ClearButton: typeof InputClearButton;
     };
 }> & import("../../core/factory/factory").ComponentClasses<{
     props: InputProps;
@@ -118,6 +127,7 @@ export declare const Input: (<C = "input">(props: import("../../core").Polymorph
         Description: typeof InputDescription;
         Placeholder: typeof InputPlaceholder;
         Wrapper: typeof InputWrapper;
+        ClearButton: typeof InputClearButton;
     };
 }> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
     props: InputProps;
@@ -133,6 +143,7 @@ export declare const Input: (<C = "input">(props: import("../../core").Polymorph
         Description: typeof InputDescription;
         Placeholder: typeof InputPlaceholder;
         Wrapper: typeof InputWrapper;
+        ClearButton: typeof InputClearButton;
     };
 }> & {
     Label: typeof InputLabel;
@@ -140,4 +151,5 @@ export declare const Input: (<C = "input">(props: import("../../core").Polymorph
     Description: typeof InputDescription;
     Placeholder: typeof InputPlaceholder;
     Wrapper: typeof InputWrapper;
+    ClearButton: typeof InputClearButton;
 };

package/lib/components/Input/InputClearButton/InputClearButton.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../../core';
+import { CloseButtonStylesNames } from '../../CloseButton';
+export interface InputClearButtonProps extends BoxProps, StylesApiProps<InputClearButtonFactory>, ElementProps<'button'> {
+    /** Size of the button, by default value is based on input context */
+    size?: MantineSize | (string & {});
+}
+export type InputClearButtonFactory = Factory<{
+    props: InputClearButtonProps;
+    ref: HTMLButtonElement;
+    stylesNames: CloseButtonStylesNames;
+}>;
+export declare const InputClearButton: import("../../../core").MantineComponent<{
+    props: InputClearButtonProps;
+    ref: HTMLButtonElement;
+    stylesNames: CloseButtonStylesNames;
+}>;

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

@@ -4,6 +4,7 @@ export { InputDescription } from './InputDescription/InputDescription';
 export { InputError } from './InputError/InputError';
 export { InputLabel } from './InputLabel/InputLabel';
 export { InputPlaceholder } from './InputPlaceholder/InputPlaceholder';
+export { InputClearButton } from './InputClearButton/InputClearButton';
 export { useInputProps } from './use-input-props';
 export { useInputWrapperContext } from './InputWrapper.context';
 export type { __InputProps, __BaseInputProps, __InputStylesNames, InputCssVariables, InputFactory, InputProps, InputStylesNames, InputVariant, } from './Input';
@@ -12,3 +13,4 @@ export type { InputDescriptionCssVariables, InputDescriptionFactory, InputDescri
 export type { InputErrorCssVariables, InputErrorFactory, InputErrorProps, InputErrorStylesNames, } from './InputError/InputError';
 export type { InputLabelCssVariables, InputLabelFactory, InputLabelProps, InputLabelStylesNames, } from './InputLabel/InputLabel';
 export type { InputPlaceholderFactory, InputPlaceholderProps, InputPlaceholderStylesNames, } from './InputPlaceholder/InputPlaceholder';
+export type { InputClearButtonFactory, InputClearButtonProps, } from './InputClearButton/InputClearButton';

package/lib/components/Menu/Menu.context.d.ts

@@ -17,6 +17,7 @@ interface MenuContext {
     menuItemTabIndex: -1 | 0 | undefined;
     openedViaClick: boolean;
     setOpenedViaClick: (value: boolean) => void;
+    withInitialFocusPlaceholder: boolean | undefined;
 }
 export declare const MenuContextProvider: ({ children, value }: {
     value: MenuContext;

package/lib/components/Menu/Menu.d.ts

@@ -42,6 +42,8 @@ export interface MenuProps extends __PopoverProps, StylesApiProps<MenuFactory> {
     id?: string;
     /** Set the `tabindex` on all menu items. Defaults to -1 */
     menuItemTabIndex?: -1 | 0;
+    /** Determines whether focus placeholder element should be added before items, `true` by default */
+    withInitialFocusPlaceholder?: boolean;
 }
 export declare function Menu(_props: MenuProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Menu {

package/lib/components/Menu/MenuItem/MenuItem.d.ts

@@ -1,6 +1,7 @@
 import { BoxProps, CompoundStylesApiProps, MantineColor, PolymorphicFactory } from '../../../core';
 export type MenuItemStylesNames = 'item' | 'itemLabel' | 'itemSection';
 export interface MenuItemProps extends BoxProps, CompoundStylesApiProps<MenuItemFactory> {
+    'data-disabled'?: boolean;
     /** Item label */
     children?: React.ReactNode;
     /** Key of `theme.colors` or any valid CSS color */

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -1,7 +1,6 @@
-import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
-import { __CloseButtonProps } from '../CloseButton';
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
 import { ComboboxItem, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames } from '../Combobox';
-import { __BaseInputProps, __InputStylesNames } from '../Input';
+import { __BaseInputProps, __InputStylesNames, InputClearButtonProps } from '../Input';
 import { ScrollAreaProps } from '../ScrollArea';
 export type MultiSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
 export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<MultiSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
@@ -36,7 +35,7 @@ export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLi
     /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */
     clearable?: boolean;
     /** Props passed down to the clear button */
-    clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
+    clearButtonProps?: InputClearButtonProps & ElementProps<'button'>;
     /** Props passed down to the hidden input */
     hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
     /** Divider used to separate values in the hidden input `value` attribute, `','` by default */
@@ -45,6 +44,8 @@ export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLi
     renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     scrollAreaProps?: ScrollAreaProps;
+    /** Controls color of the default chevron, by default depends on the color scheme */
+    chevronColor?: MantineColor;
 }
 export type MultiSelectFactory = Factory<{
     props: MultiSelectProps;

package/lib/components/NumberInput/NumberInput.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { NumberFormatValues, OnValueChange } from 'react-number-format';
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';

package/lib/components/Pagination/Pagination.d.ts

@@ -28,6 +28,8 @@ export interface PaginationProps extends PaginationRootProps {
     gap?: MantineSize | (string & {}) | number;
     /** Determines whether the pagination should be hidden when only one page is available (`total={1}`), `false` by default */
     hideWithOnePage?: boolean;
+    /** Determines whether pages controls should be displayed, `true` by default */
+    withPages?: boolean;
 }
 export type PaginationFactory = Factory<{
     props: PaginationProps;

package/lib/components/Popover/Popover.d.ts

@@ -1,9 +1,10 @@
-import { ExtendComponent, Factory, MantineRadius, MantineShadow, StylesApiProps } from '../../core';
+import { ElementProps, ExtendComponent, Factory, MantineRadius, MantineShadow, StylesApiProps } from '../../core';
 import { ArrowPosition, FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../Floating';
+import { OverlayProps } from '../Overlay';
 import { PortalProps } from '../Portal';
 import { TransitionOverride } from '../Transition';
 import { PopoverMiddlewares, PopoverWidth } from './Popover.types';
-export type PopoverStylesNames = 'dropdown' | 'arrow';
+export type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';
 export type PopoverCssVariables = {
     dropdown: '--popover-radius' | '--popover-shadow';
 };
@@ -34,6 +35,10 @@ export interface __PopoverProps {
     middlewares?: PopoverMiddlewares;
     /** Determines whether component should have an arrow, `false` by default */
     withArrow?: boolean;
+    /** Determines whether the overlay should be displayed when the dropdown is opened, `false` by default */
+    withOverlay?: boolean;
+    /** Props passed down to `Overlay` component */
+    overlayProps?: OverlayProps & ElementProps<'div'>;
     /** Arrow size in px, `7` by default */
     arrowSize?: number;
     /** Arrow offset in px, `5` by default */

package/lib/components/Select/Select.d.ts

@@ -1,7 +1,6 @@
-import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
-import { __CloseButtonProps } from '../CloseButton';
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
 import { ComboboxItem, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames } from '../Combobox';
-import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
+import { __BaseInputProps, __InputStylesNames, InputClearButtonProps, InputVariant } from '../Input';
 import { ScrollAreaProps } from '../ScrollArea';
 export type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;
 export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<SelectFactory>, ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {
@@ -32,13 +31,15 @@ export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikePro
     /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */
     clearable?: boolean;
     /** Props passed down to the clear button */
-    clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
+    clearButtonProps?: InputClearButtonProps & ElementProps<'button'>;
     /** Props passed down to the hidden input */
     hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
     /** A function to render content of the option, replaces the default content of the option */
     renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     scrollAreaProps?: ScrollAreaProps;
+    /** Controls color of the default chevron, by default depends on the color scheme */
+    chevronColor?: MantineColor;
 }
 export type SelectFactory = Factory<{
     props: SelectProps;

package/lib/components/Slider/RangeSlider/RangeSlider.d.ts

@@ -60,6 +60,8 @@ export interface RangeSliderProps extends BoxProps, StylesApiProps<RangeSliderFa
     thumbToLabel?: string;
     /** Props passed down to the hidden input */
     hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    /** Determines whether the selection should be only allowed from the given marks array, `false` by default */
+    restrictToMarks?: boolean;
     /** Props passed down to thumb element based on the thumb index */
     thumbProps?: (index: 0 | 1) => React.ComponentPropsWithoutRef<'div'>;
 }

package/lib/components/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,58 @@
+import { UseScrollSpyHeadingData, UseScrollSpyOptions } from '@mantine/hooks';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
+import { UnstyledButtonProps } from '../UnstyledButton';
+export type TableOfContentsStylesNames = 'root' | 'control';
+export type TableOfContentsVariant = 'filled' | 'light' | 'none';
+export type TableOfContentsCssVariables = {
+    root: '--toc-bg' | '--toc-color' | '--toc-size' | '--toc-depth-offset' | '--toc-radius';
+};
+export interface InitialTableOfContentsData {
+    /** Heading depth, 1-6 */
+    depth: number;
+    /** Heading text content value */
+    value: string;
+    /** Heading id, must be unique, used as `key` */
+    id?: string;
+}
+export interface TableOfContentsGetControlPropsPayload {
+    /** True if the associated heading is currently the best match in the viewport */
+    active: boolean;
+    /** Data passed down from `use-scroll-spy` hook: depth, id, value */
+    data: UseScrollSpyHeadingData;
+}
+export interface TableOfContentsProps extends BoxProps, StylesApiProps<TableOfContentsFactory>, ElementProps<'div'> {
+    /** Key of `theme.colors` or any valid CSS color value, `theme.primaryColor` by default */
+    color?: MantineColor;
+    /** Controls font-size and padding of all elements, `'md'` by default */
+    size?: MantineSize | (string & {}) | number;
+    /** Determines whether text color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */
+    autoContrast?: boolean;
+    /** Options passed down to `use-scroll-spy` hook */
+    scrollSpyOptions?: UseScrollSpyOptions;
+    /** Data used to render content until actual values are retrieved from the DOM, empty array by default */
+    initialData?: InitialTableOfContentsData[];
+    /** A function to pass props down to controls, accepts values from `use-scroll-spy` hook as an argument and active state. */
+    getControlProps?: (payload: TableOfContentsGetControlPropsPayload) => UnstyledButtonProps & ElementProps<'button'> & Record<`data-${string}`, any>;
+    /** Minimum `depth` value that requires offset, `1` by default */
+    minDepthToOffset?: number;
+    /** Controls padding on the left side of control, multiplied by (`depth` - `minDepthToOffset`), `20px` by default  */
+    depthOffset?: number | string;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
+    radius?: MantineRadius;
+    /** A function to reinitialize headings from `use-scroll-spy` hook */
+    reinitializeRef?: React.RefObject<() => void>;
+}
+export type TableOfContentsFactory = Factory<{
+    props: TableOfContentsProps;
+    ref: HTMLDivElement;
+    stylesNames: TableOfContentsStylesNames;
+    vars: TableOfContentsCssVariables;
+    variant: TableOfContentsVariant;
+}>;
+export declare const TableOfContents: import("../../core").MantineComponent<{
+    props: TableOfContentsProps;
+    ref: HTMLDivElement;
+    stylesNames: TableOfContentsStylesNames;
+    vars: TableOfContentsCssVariables;
+    variant: TableOfContentsVariant;
+}>;

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

@@ -0,0 +1,2 @@
+export { TableOfContents } from './TableOfContents';
+export type { TableOfContentsProps, TableOfContentsCssVariables, TableOfContentsFactory, TableOfContentsStylesNames, TableOfContentsVariant, } from './TableOfContents';

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

@@ -1,7 +1,6 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
-import { __CloseButtonProps } from '../CloseButton';
 import { ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxStringData, ComboboxStringItem } from '../Combobox';
-import { __BaseInputProps, __InputStylesNames } from '../Input';
+import { __BaseInputProps, __InputStylesNames, InputClearButtonProps } from '../Input';
 import { ScrollAreaProps } from '../ScrollArea';
 export type TagsInputStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
 export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<ComboboxLikeProps, 'data'>, StylesApiProps<TagsInputFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
@@ -34,7 +33,7 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<Combobo
     /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */
     clearable?: boolean;
     /** Props passed down to the clear button */
-    clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
+    clearButtonProps?: InputClearButtonProps & ElementProps<'button'>;
     /** Props passed down to the hidden input */
     hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
     /** Divider used to separate values in the hidden input `value` attribute, `','` by default */

package/lib/components/index.d.ts

@@ -88,6 +88,7 @@ export * from './Stack';
 export * from './Stepper';
 export * from './Switch';
 export * from './Table';
+export * from './TableOfContents';
 export * from './Tabs';
 export * from './TagsInput';
 export * from './Text';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.15.3",
+  "version": "7.16.1",
   "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": "7.15.3",
+    "@mantine/hooks": "7.16.1",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },

package/styles/Combobox.css

@@ -171,18 +171,21 @@
   --combobox-chevron-size-lg: 24px;
   --combobox-chevron-size-xl: 28px;
   --combobox-chevron-size: var(--combobox-chevron-size-sm);
-
-  width: var(--combobox-chevron-size);
-  height: var(--combobox-chevron-size);
 }
 :where([data-mantine-color-scheme='light']) .m_2943220b {
-    color: var(--mantine-color-gray-6);
+    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));
 }
 :where([data-mantine-color-scheme='dark']) .m_2943220b {
-    color: var(--mantine-color-dark-3);
+    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));
+}
+.m_2943220b {
+
+  width: var(--combobox-chevron-size);
+  height: var(--combobox-chevron-size);
+  color: var(--_combobox-chevron-color);
 }
 .m_2943220b:where([data-error]) {
-    color: var(--mantine-color-error);
+    color: var(--combobox-chevron-color, var(--mantine-color-error));
   }
 
 /* ------- OptionsDropdown ------- */

package/styles/Combobox.layer.css

@@ -171,18 +171,21 @@
   --combobox-chevron-size-lg: 24px;
   --combobox-chevron-size-xl: 28px;
   --combobox-chevron-size: var(--combobox-chevron-size-sm);
-
-  width: var(--combobox-chevron-size);
-  height: var(--combobox-chevron-size);
 }
 :where([data-mantine-color-scheme='light']) .m_2943220b {
-    color: var(--mantine-color-gray-6);
+    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));
 }
 :where([data-mantine-color-scheme='dark']) .m_2943220b {
-    color: var(--mantine-color-dark-3);
+    --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));
+}
+.m_2943220b {
+
+  width: var(--combobox-chevron-size);
+  height: var(--combobox-chevron-size);
+  color: var(--_combobox-chevron-color);
 }
 .m_2943220b:where([data-error]) {
-    color: var(--mantine-color-error);
+    color: var(--combobox-chevron-color, var(--mantine-color-error));
   }
 
 /* ------- OptionsDropdown ------- */

package/styles/Menu.css

@@ -38,15 +38,15 @@
 .m_99ac2aa1:where([data-disabled], :disabled) {
     color: var(--mantine-color-dimmed);
     opacity: 0.6;
-    pointer-events: none;
+    cursor: not-allowed;
   }
 
-:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where([data-hovered]) {
-      background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
+:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+        background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
 }
 
-:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where([data-hovered]) {
-      background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
+:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+        background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
 }
 
 .m_5476e0d3 {

package/styles/Menu.layer.css

@@ -38,15 +38,15 @@
 .m_99ac2aa1:where([data-disabled], :disabled) {
     color: var(--mantine-color-dimmed);
     opacity: 0.6;
-    pointer-events: none;
+    cursor: not-allowed;
   }
 
-:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where([data-hovered]) {
-      background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
+:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+        background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
 }
 
-:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where([data-hovered]) {
-      background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
+:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+        background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
 }
 
 .m_5476e0d3 {

package/styles/Popover.css

@@ -29,3 +29,8 @@
   border: 1px solid var(--popover-border-color);
   z-index: 1;
 }
+
+.m_3d7bc908 {
+  position: fixed;
+  inset: 0;
+}

package/styles/Popover.layer.css

@@ -29,4 +29,9 @@
   border: 1px solid var(--popover-border-color);
   z-index: 1;
 }
+
+.m_3d7bc908 {
+  position: fixed;
+  inset: 0;
+}
 }

package/styles/Table.css

@@ -79,19 +79,19 @@
     border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
   }
 
-.m_b2404537 :where(tr):where([data-with-row-border]:last-of-type) {
+.m_b2404537 > :where(tr):where([data-with-row-border]:last-of-type) {
       border-bottom: none;
     }
 
-.m_b2404537 :where(tr):where([data-striped='odd']:nth-of-type(odd)) {
+.m_b2404537 > :where(tr):where([data-striped='odd']:nth-of-type(odd)) {
       background-color: var(--table-striped-color);
     }
 
-.m_b2404537 :where(tr):where([data-striped='even']:nth-of-type(even)) {
+.m_b2404537 > :where(tr):where([data-striped='even']:nth-of-type(even)) {
       background-color: var(--table-striped-color);
     }
 
-.m_b2404537 :where(tr)[data-hover] {
+.m_b2404537 > :where(tr)[data-hover] {
       --tr-hover-bg: var(--table-highlight-on-hover-color, var(--table-hover-color));
     }
 

package/styles/Table.layer.css

@@ -79,19 +79,19 @@
     border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
   }
 
-.m_b2404537 :where(tr):where([data-with-row-border]:last-of-type) {
+.m_b2404537 > :where(tr):where([data-with-row-border]:last-of-type) {
       border-bottom: none;
     }
 
-.m_b2404537 :where(tr):where([data-striped='odd']:nth-of-type(odd)) {
+.m_b2404537 > :where(tr):where([data-striped='odd']:nth-of-type(odd)) {
       background-color: var(--table-striped-color);
     }
 
-.m_b2404537 :where(tr):where([data-striped='even']:nth-of-type(even)) {
+.m_b2404537 > :where(tr):where([data-striped='even']:nth-of-type(even)) {
       background-color: var(--table-striped-color);
     }
 
-.m_b2404537 :where(tr)[data-hover] {
+.m_b2404537 > :where(tr)[data-hover] {
       --tr-hover-bg: var(--table-highlight-on-hover-color, var(--table-hover-color));
     }
 

package/styles/TableOfContents.css

@@ -0,0 +1,38 @@
+.m_bcaa9990 {
+  display: flex;
+  flex-direction: column;
+  --toc-depth-offset: 0.8em;
+}
+
+.m_375a65ef {
+  display: block;
+  padding: 0.3em 0.8em;
+  font-size: var(--toc-size, var(--mantine-font-size-md));
+  border-radius: var(--toc-radius, var(--mantine-radius-default));
+  padding-left: max(calc(var(--depth-offset) * var(--toc-depth-offset)), 0.8em);
+}
+
+@media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_375a65ef:where([data-active]) {
+    background-color: var(--toc-bg);
+    color: var(--toc-color);
+  }