@mantine/core 7.1.3 → 7.2.0-alpha.0

package/lib/components/BackgroundImage/BackgroundImage.d.ts

@@ -21,10 +21,10 @@ export declare const BackgroundImage: (<C = "div">(props: import("../../core/fac
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof BackgroundImageProps> & {
     ref?: any;
-    renderRoot?(props: any): any;
+    renderRoot?: ((props: any) => any) | undefined;
 }) | (BackgroundImageProps & {
     component: React.ElementType<any>;
-    renderRoot?(props: Record<string, any>): any;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: BackgroundImageProps;
     defaultRef: HTMLDivElement;

package/lib/components/Badge/Badge.d.ts

@@ -35,10 +35,10 @@ export declare const Badge: (<C = "div">(props: import("../../core/factory/creat
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof BadgeProps> & {
     ref?: any;
-    renderRoot?(props: any): any;
+    renderRoot?: ((props: any) => any) | undefined;
 }) | (BadgeProps & {
-    component: React.ElementType<any>; /** Controls `font-size`, `height` and horizontal `padding`, `'md'` by default */
-    renderRoot?(props: Record<string, any>): any;
+    component: React.ElementType<any>;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: BadgeProps;
     defaultRef: HTMLDivElement;

package/lib/components/Button/Button.d.ts

@@ -5,7 +5,7 @@ import { ButtonGroup } from './ButtonGroup/ButtonGroup';
 export type ButtonStylesNames = 'root' | 'inner' | 'loader' | 'section' | 'label';
 export type ButtonVariant = 'filled' | 'light' | 'outline' | 'transparent' | 'white' | 'subtle' | 'default' | 'gradient';
 export type ButtonCssVariables = {
-    root: '--button-justify' | '--button-height' | '--button-padding-x' | '--button-fz' | '--button-radius' | '--button-bg' | '--button-hover' | '--button-color' | '--button-bd';
+    root: '--button-justify' | '--button-height' | '--button-padding-x' | '--button-fz' | '--button-radius' | '--button-bg' | '--button-hover' | '--button-hover-color' | '--button-color' | '--button-bd';
 };
 export interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {
     'data-disabled'?: boolean;
@@ -49,10 +49,10 @@ export declare const Button: (<C = "button">(props: import("../../core/factory/c
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof ButtonProps> & {
     ref?: any;
-    renderRoot?(props: any): any;
+    renderRoot?: ((props: any) => any) | undefined;
 }) | (ButtonProps & {
     component: React.ElementType<any>;
-    renderRoot?(props: Record<string, any>): any;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: ButtonProps;
     defaultRef: HTMLButtonElement;

package/lib/components/Card/Card.d.ts

@@ -31,10 +31,10 @@ export declare const Card: (<C = "div">(props: import("../../core/factory/create
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof CardProps> & {
     ref?: any;
-    renderRoot?(props: any): any;
+    renderRoot?: ((props: any) => any) | undefined;
 }) | (CardProps & {
     component: React.ElementType<any>;
-    renderRoot?(props: Record<string, any>): any;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: CardProps;
     defaultRef: HTMLDivElement;

package/lib/components/Card/CardSection/CardSection.d.ts

@@ -18,10 +18,10 @@ export declare const CardSection: (<C = "div">(props: import("../../../core/fact
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof CardSectionProps> & {
     ref?: any;
-    renderRoot?(props: any): any;
+    renderRoot?: ((props: any) => any) | undefined;
 }) | (CardSectionProps & {
     component: React.ElementType<any>;
-    renderRoot?(props: Record<string, any>): any;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../../core/factory/factory").ThemeExtend<{
     props: CardSectionProps;
     defaultRef: HTMLDivElement;

package/lib/components/Center/Center.d.ts

@@ -17,10 +17,10 @@ export declare const Center: (<C = "div">(props: import("../../core/factory/crea
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof CenterProps> & {
     ref?: any;
-    renderRoot?(props: any): any;
+    renderRoot?: ((props: any) => any) | undefined;
 }) | (CenterProps & {
     component: React.ElementType<any>;
-    renderRoot?(props: Record<string, any>): any;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: CenterProps;
     defaultRef: HTMLDivElement;

package/lib/components/Checkbox/Checkbox.d.ts

@@ -4,14 +4,14 @@ import { InlineInputStylesNames } from '../InlineInput';
 import { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
 export type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;
 export type CheckboxCssVariables = {
-    root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color';
+    root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';
 };
 export interface CheckboxProps extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size'> {
     /** Id used to bind input and label, if not passed, unique id will be generated instead */
     id?: string;
     /** Checkbox label */
     label?: React.ReactNode;
-    /** Key of `theme.colors` or any valid CSS color to set input color in checked state, `theme.primaryColor` by default */
+    /** Key of `theme.colors` or any valid CSS color to set input background color in checked state, `theme.primaryColor` by default */
     color?: MantineColor;
     /** Controls size of all elements */
     size?: MantineSize | (string & {});
@@ -34,6 +34,8 @@ export interface CheckboxProps extends BoxProps, StylesApiProps<CheckboxFactory>
     }>;
     /** Assigns ref of the root element, can be used with `Tooltip` and other similar components */
     rootRef?: React.ForwardedRef<HTMLDivElement>;
+    /** Key of `theme.colors` or any valid CSS color to set icon color, `theme.white` by default */
+    iconColor?: MantineColor;
 }
 export type CheckboxFactory = Factory<{
     props: CheckboxProps;

package/lib/components/Checkbox/CheckboxGroup/CheckboxGroup.d.ts

@@ -10,7 +10,7 @@ export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'onChange'>
     /** Default value for uncontrolled component */
     defaultValue?: string[];
     /** Called when value changes */
-    onChange?(value: string[]): void;
+    onChange?: (value: string[]) => void;
     /** Props passed down to the `Input.Wrapper` */
     wrapperProps?: Record<string, any>;
     /** Controls size of the `Input.Wrapper`, `'sm'` by default */

package/lib/components/Checkbox/CheckboxGroup.context.d.ts

@@ -2,7 +2,7 @@
 import { MantineSize } from '../../core';
 interface CheckboxGroupContextValue {
     value: string[];
-    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     size: MantineSize | (string & {}) | undefined;
 }
 export declare const CheckboxGroupProvider: import("react").Provider<CheckboxGroupContextValue | null>;

package/lib/components/Chip/Chip.d.ts

@@ -9,9 +9,9 @@ export type ChipCssVariables = {
 export interface ChipProps extends BoxProps, StylesApiProps<ChipFactory>, ElementProps<'input', 'size' | 'onChange'> {
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `'xl'` by default */
     radius?: MantineRadius;
-    /** Controls various properties, `'sm'` by default */
+    /** Controls various properties related to component size, `'sm'` by default */
     size?: MantineSize;
-    /** Chip input type */
+    /** Chip input type, `'checkbox'` by default */
     type?: 'radio' | 'checkbox';
     /** Chip label */
     children: React.ReactNode;
@@ -20,10 +20,10 @@ export interface ChipProps extends BoxProps, StylesApiProps<ChipFactory>, Elemen
     /** Default checked state for uncontrolled component */
     defaultChecked?: boolean;
     /** Calls when checked state changes */
-    onChange?(checked: boolean): void;
-    /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` */
+    onChange?: (checked: boolean) => void;
+    /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
     color?: MantineColor;
-    /** Static id to bind input with label */
+    /** Static id to bind input with label, by default id is randomly generated */
     id?: string;
     /** Props passed down to the wrapper element */
     wrapperProps?: Record<string, any>;

package/lib/components/Chip/ChipGroup/ChipGroup.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 export interface ChipGroupProps<T extends boolean = false> {
-    /** Allow multiple values to be selected at a time */
+    /** Determines whether it is allowed to select multiple values, `false` by default */
     multiple?: T;
     /** Controlled component value */
     value?: T extends true ? string[] : string | null;
     /** Uncontrolled component initial value */
     defaultValue?: T extends true ? string[] : string | null;
     /** Called when value changes */
-    onChange?(value: T extends true ? string[] : string): void;
-    /** <Chip /> components */
+    onChange?: (value: T extends true ? string[] : string) => void;
+    /** `Chip` components */
     children?: React.ReactNode;
 }
 export declare function ChipGroup<T extends boolean>(props: ChipGroupProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/components/Chip/ChipGroup.context.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface ChipGroupContextValue {
-    isChipSelected(value: string): boolean;
-    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    isChipSelected: (value: string) => boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     multiple: boolean;
 }
 export declare const ChipGroupProvider: ({ children, value }: {

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

@@ -32,10 +32,10 @@ export declare const CloseButton: (<C = "button">(props: import("../../core/fact
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof CloseButtonProps> & {
     ref?: any;
-    renderRoot?(props: any): any;
+    renderRoot?: ((props: any) => any) | undefined;
 }) | (CloseButtonProps & {
     component: React.ElementType<any>;
-    renderRoot?(props: Record<string, any>): any;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: CloseButtonProps;
     defaultComponent: 'button';

package/lib/components/Collapse/Collapse.d.ts

@@ -4,7 +4,7 @@ export interface CollapseProps extends BoxProps, Omit<React.ComponentPropsWithou
     /** Opened state */
     in: boolean;
     /** Called each time transition ends */
-    onTransitionEnd?(): void;
+    onTransitionEnd?: () => void;
     /** Transition duration in ms, `200` by default */
     transitionDuration?: number;
     /** Transition timing function, default value is `ease` */

package/lib/components/ColorPicker/ColorPicker.d.ts

@@ -10,9 +10,9 @@ export interface __ColorPickerProps {
     /** Uncontrolled component default value */
     defaultValue?: string;
     /** Called when color changes */
-    onChange?(value: string): void;
+    onChange?: (value: string) => void;
     /** Called when user stops dragging or changes value with arrow keys */
-    onChangeEnd?(value: string): void;
+    onChangeEnd?: (value: string) => void;
     /** Color format, `'hex'` by default */
     format?: ColorFormat;
     /** Determines whether color picker should be displayed, `true` by default */
@@ -37,7 +37,7 @@ export interface ColorPickerProps extends BoxProps, __ColorPickerProps, StylesAp
     /** Alpha slider `aria-label` */
     alphaLabel?: string;
     /** Called when one of the color swatches is clicked */
-    onColorSwatchClick?(color: string): void;
+    onColorSwatchClick?: (color: string) => void;
 }
 export type ColorPickerFactory = Factory<{
     props: ColorPickerProps;

package/lib/components/ColorPicker/ColorSlider/ColorSlider.d.ts

@@ -2,10 +2,10 @@ import React from 'react';
 import { ElementProps, MantineSize } from '../../../core';
 export interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {
     value: number;
-    onChange?(value: number): void;
-    onChangeEnd?(value: number): void;
-    onScrubStart?(): void;
-    onScrubEnd?(): void;
+    onChange?: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    onScrubStart?: () => void;
+    onScrubEnd?: () => void;
     size?: MantineSize | (string & {});
     focusable?: boolean;
 }

package/lib/components/ColorPicker/Saturation/Saturation.d.ts

@@ -2,10 +2,10 @@ import { ElementProps, MantineSize } from '../../../core';
 import { HsvaColor } from '../ColorPicker.types';
 export interface SaturationProps extends ElementProps<'div', 'onChange'> {
     value: HsvaColor;
-    onChange(color: Partial<HsvaColor>): void;
-    onChangeEnd(color: Partial<HsvaColor>): void;
-    onScrubStart?(): void;
-    onScrubEnd?(): void;
+    onChange: (color: Partial<HsvaColor>) => void;
+    onChangeEnd: (color: Partial<HsvaColor>) => void;
+    onScrubStart?: () => void;
+    onScrubEnd?: () => void;
     saturationLabel?: string;
     size: MantineSize | (string & {});
     color: string;

package/lib/components/ColorPicker/Swatches/Swatches.d.ts

@@ -6,6 +6,6 @@ export interface SwatchesProps extends ElementProps<'div'> {
     swatchesPerRow?: number;
     focusable?: boolean;
     onChangeEnd?: (color: string) => void;
-    setValue(value: string): void;
+    setValue: (value: string) => void;
 }
 export declare const Swatches: React.ForwardRefExoticComponent<SwatchesProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/ColorSwatch/ColorSwatch.d.ts

@@ -27,10 +27,10 @@ export declare const ColorSwatch: (<C = "div">(props: import("../../core/factory
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof ColorSwatchProps> & {
     ref?: any;
-    renderRoot?(props: any): any;
+    renderRoot?: ((props: any) => any) | undefined;
 }) | (ColorSwatchProps & {
     component: React.ElementType<any>;
-    renderRoot?(props: Record<string, any>): any;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: ColorSwatchProps;
     defaultRef: HTMLDivElement;

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

@@ -6,7 +6,7 @@ import type { ComboboxStore } from './use-combobox/use-combobox';
 export interface ComboboxContextValue {
     getStyles: GetStylesApi<ComboboxFactory>;
     store: ComboboxStore;
-    onOptionSubmit?(value: string, optionProps: ComboboxOptionProps): void;
+    onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;
     size: MantineSize | (string & {});
     resetSelectionOnOptionHover: boolean | undefined;
     readOnly: boolean | undefined;

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

@@ -26,7 +26,7 @@ export interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFa
     /** Combobox store, can be used to control combobox state */
     store?: ComboboxStore;
     /** Called when item is selected with `Enter` key or by clicking it */
-    onOptionSubmit?(value: string, optionProps: ComboboxOptionProps): void;
+    onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;
     /** Controls items `font-size` and `padding`, `'sm'` by default */
     size?: MantineSize | (string & {});
     /** Controls `padding` of the dropdown, `4` by default */

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

@@ -24,13 +24,13 @@ export interface ComboboxLikeProps {
     /** Uncontrolled dropdown initial opened state */
     defaultDropdownOpened?: boolean;
     /** Called when dropdown opens */
-    onDropdownOpen?(): void;
+    onDropdownOpen?: () => void;
     /** Called when dropdown closes */
-    onDropdownClose?(): void;
+    onDropdownClose?: () => void;
     /** Determines whether the first option should be selected when value changes, `false` by default */
     selectFirstOptionOnChange?: boolean;
     /** Called when option is submitted from dropdown with mouse click or `Enter` key */
-    onOptionSubmit?(value: string): void;
+    onOptionSubmit?: (value: string) => void;
     /** Props passed down to `Combobox` component */
     comboboxProps?: ComboboxProps;
     /** Function based on which items are filtered and sorted */

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

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

package/lib/components/Combobox/use-combobox/use-combobox.d.ts

@@ -4,54 +4,54 @@ export interface ComboboxStore {
     /** Current dropdown opened state */
     dropdownOpened: boolean;
     /** Opens dropdown */
-    openDropdown(eventSource?: ComboboxDropdownEventSource): void;
+    openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
     /** Closes dropdown */
-    closeDropdown(eventSource?: ComboboxDropdownEventSource): void;
+    closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
     /** Toggles dropdown opened state */
-    toggleDropdown(eventSource?: ComboboxDropdownEventSource): void;
+    toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;
     /** Selected option index */
     selectedOptionIndex: number;
     /** Selects `Combobox.Option` by index */
-    selectOption(index: number): void;
+    selectOption: (index: number) => void;
     /** Selects first `Combobox.Option` with `active` prop.
      *  If there are no such options, the function does nothing.
      */
-    selectActiveOption(): string | null;
+    selectActiveOption: () => string | null;
     /** Selects first `Combobox.Option` that is not disabled.
      *  If there are no such options, the function does nothing.
      * */
-    selectFirstOption(): string | null;
+    selectFirstOption: () => string | null;
     /** Selects next `Combobox.Option` that is not disabled.
      *  If the current option is the last one, the function selects first option, if `loop` is true.
      */
-    selectNextOption(): string | null;
+    selectNextOption: () => string | null;
     /** Selects previous `Combobox.Option` that is not disabled.
      *  If the current option is the first one, the function selects last option, if `loop` is true.
      * */
-    selectPreviousOption(): string | null;
+    selectPreviousOption: () => string | null;
     /** Resets selected option index to -1, removes `data-combobox-selected` from selected option */
-    resetSelectedOption(): void;
+    resetSelectedOption: () => void;
     /** Triggers `onClick` event of selected option.
      *  If there is no selected option, the function does nothing.
      */
-    clickSelectedOption(): void;
+    clickSelectedOption: () => void;
     /** Updates selected option index to currently selected or active option.
      *  The function is required to be used with searchable components to update selected option index
      *  when options list changes based on search query.
      */
-    updateSelectedOptionIndex(target?: 'active' | 'selected'): void;
+    updateSelectedOptionIndex: (target?: 'active' | 'selected') => void;
     /** List id, used for `aria-*` attributes */
     listId: string | null;
     /** Sets list id */
-    setListId(id: string): void;
+    setListId: (id: string) => void;
     /** Ref of `Combobox.Search` input */
     searchRef: React.MutableRefObject<HTMLInputElement | null>;
     /** Moves focus to `Combobox.Search` input */
-    focusSearchInput(): void;
+    focusSearchInput: () => void;
     /** Ref of the target element */
     targetRef: React.MutableRefObject<HTMLElement | null>;
     /** Moves focus to the target element */
-    focusTarget(): void;
+    focusTarget: () => void;
 }
 export interface UseComboboxOptions {
     /** Default value for `dropdownOpened`, `false` by default */
@@ -59,11 +59,11 @@ export interface UseComboboxOptions {
     /** Controlled `dropdownOpened` state */
     opened?: boolean;
     /** Called when `dropdownOpened` state changes */
-    onOpenedChange?(opened: boolean): void;
+    onOpenedChange?: (opened: boolean) => void;
     /** Called when dropdown closes with event source: keyboard, mouse or unknown */
-    onDropdownClose?(eventSource: ComboboxDropdownEventSource): void;
+    onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;
     /** Called when dropdown opens with event source: keyboard, mouse or unknown */
-    onDropdownOpen?(eventSource: ComboboxDropdownEventSource): void;
+    onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;
     /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
     loop?: boolean;
     /** `behavior` passed down to `element.scrollIntoView`, `'instant'` by default */

package/lib/components/Combobox/use-combobox/use-virtualized-combobox.d.ts

@@ -5,21 +5,21 @@ interface UseComboboxOptions {
     /** Controlled `dropdownOpened` state */
     opened?: boolean;
     /** Called when `dropdownOpened` state changes */
-    onOpenedChange?(opened: boolean): void;
+    onOpenedChange?: (opened: boolean) => void;
     /** Called when dropdown closes */
-    onDropdownClose?(): void;
+    onDropdownClose?: () => void;
     /** Called when dropdown opens */
-    onDropdownOpen?(): void;
+    onDropdownOpen?: () => void;
     /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
     loop?: boolean;
     /** Function to determine whether the option is disabled */
-    isOptionDisabled?(optionIndex: number): boolean;
+    isOptionDisabled?: (optionIndex: number) => boolean;
     totalOptionsCount: number;
-    getOptionId(index: number): string | null;
+    getOptionId: (index: number) => string | null;
     selectedOptionIndex: number;
-    setSelectedOptionIndex(index: number): void;
+    setSelectedOptionIndex: (index: number) => void;
     activeOptionIndex?: number;
-    onSelectedOptionSubmit(index: number): void;
+    onSelectedOptionSubmit: (index: number) => void;
 }
 export declare function useVirtualizedCombobox({ defaultOpened, opened, onOpenedChange, onDropdownClose, onDropdownOpen, loop, totalOptionsCount, isOptionDisabled, getOptionId, selectedOptionIndex, setSelectedOptionIndex, activeOptionIndex, onSelectedOptionSubmit, }?: UseComboboxOptions): ComboboxStore;
 export {};

package/lib/components/CopyButton/CopyButton.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 export interface CopyButtonProps {
     /** Children callback, provides current status and copy function as an argument */
-    children(payload: {
+    children: (payload: {
         copied: boolean;
-        copy(): void;
-    }): React.ReactNode;
+        copy: () => void;
+    }) => React.ReactNode;
     /** Value that will be copied to the clipboard when the button is clicked */
     value: string;
     /** Copied status timeout in ms, `1000` by default */

package/lib/components/Dialog/Dialog.d.ts

@@ -13,7 +13,7 @@ export interface DialogProps extends BoxProps, AffixBaseProps, PaperBaseProps, S
     /** Determines whether the close button should be displayed, `true` by default */
     withCloseButton?: boolean;
     /** Called when the close button is clicked */
-    onClose?(): void;
+    onClose?: () => void;
     /** Dialog content */
     children?: React.ReactNode;
     /** Opened state */

package/lib/components/FileButton/FileButton.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 export interface FileButtonProps<Multiple extends boolean = false> {
     /** Called when files are picked */
-    onChange(payload: Multiple extends true ? File[] : File | null): void;
+    onChange: (payload: Multiple extends true ? File[] : File | null) => void;
     /** Function that receives button props and returns react node that should be rendered */
-    children(props: {
-        onClick(): void;
-    }): React.ReactNode;
+    children: (props: {
+        onClick: () => void;
+    }) => React.ReactNode;
     /** Determines whether user can pick more than one file */
     multiple?: Multiple;
     /** File input accept attribute, for example, `"image/png,image/jpeg"` */

package/lib/components/FileInput/FileInput.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import { ElementProps, Factory } from '../../core';
-import { __InputStylesNames, InputVariant } from '../Input';
-import { InputBaseProps } from '../InputBase/InputBase';
-export interface FileInputProps<Multiple = false> extends InputBaseProps, ElementProps<'button', 'value' | 'defaultValue' | 'onChange'> {
+import { ElementProps, Factory, BoxProps, StylesApiProps } from '../../core';
+import { __InputStylesNames, InputVariant, __BaseInputProps } from '../Input';
+export interface FileInputProps<Multiple = false> extends BoxProps, __BaseInputProps, StylesApiProps<FileInputFactory>, ElementProps<'button', 'value' | 'defaultValue' | 'onChange'> {
     /** Called when value changes */
-    onChange?(payload: Multiple extends true ? File[] : File | null): void;
+    onChange?: (payload: Multiple extends true ? File[] : File | null) => void;
     /** Controlled component value */
     value?: Multiple extends true ? File[] : File | null;
     /** Uncontrolled component default value */

package/lib/components/Flex/Flex.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, StyleProp, MantineSize } from '../../core';
+import { BoxProps, StylesApiProps, ElementProps, StyleProp, MantineSize, PolymorphicFactory } from '../../core';
 export type FlexStylesNames = 'root';
 export interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {
     /** `gap` CSS property */
@@ -10,20 +10,35 @@ export interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, Elemen
     columnGap?: StyleProp<MantineSize | (string & {}) | number>;
     /** `align-items` CSS property */
     align?: StyleProp<React.CSSProperties['alignItems']>;
-    /** justify-content CSS property */
+    /** `justify-content` CSS property */
     justify?: StyleProp<React.CSSProperties['justifyContent']>;
-    /** flex-wrap CSS property */
+    /** `flex-wrap` CSS property */
     wrap?: StyleProp<React.CSSProperties['flexWrap']>;
-    /** flex-direction CSS property */
+    /** `flex-direction` CSS property */
     direction?: StyleProp<React.CSSProperties['flexDirection']>;
 }
-export type FlexFactory = Factory<{
+export type FlexFactory = PolymorphicFactory<{
     props: FlexProps;
-    ref: HTMLDivElement;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
     stylesNames: FlexStylesNames;
 }>;
-export declare const Flex: import("../../core").MantineComponent<{
+export declare const Flex: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, FlexProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(FlexProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof FlexProps> & {
+    ref?: any;
+    renderRoot?: ((props: any) => any) | undefined;
+}) | (FlexProps & {
+    component: React.ElementType<any>;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
+})>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: FlexProps;
-    ref: HTMLDivElement;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
     stylesNames: FlexStylesNames;
-}>;
+}> & import("../../core/factory/factory").ComponentClasses<{
+    props: FlexProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: FlexStylesNames;
+}> & Record<string, never>;

package/lib/components/Floating/use-delayed-hover.d.ts

@@ -1,6 +1,6 @@
 interface UseDelayedHoverInput {
-    open(): void;
-    close(): void;
+    open: () => void;
+    close: () => void;
     openDelay: number | undefined;
     closeDelay: number | undefined;
 }

package/lib/components/Floating/use-floating-auto-update.d.ts

@@ -3,7 +3,7 @@ import { FloatingPosition } from './types';
 interface Payload {
     opened: boolean | undefined;
     floating: {
-        update(): void;
+        update: () => void;
         refs: {
             floating: React.MutableRefObject<any>;
             reference: React.MutableRefObject<any>;

package/lib/components/Highlight/Highlight.d.ts

@@ -22,10 +22,10 @@ export declare const Highlight: (<C = "div">(props: import("../../core/factory/c
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof HighlightProps> & {
     ref?: any;
-    renderRoot?(props: any): any;
+    renderRoot?: ((props: any) => any) | undefined;
 }) | (HighlightProps & {
     component: React.ElementType<any>;
-    renderRoot?(props: Record<string, any>): any;
+    renderRoot?: ((props: Record<string, any>) => any) | undefined;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: HighlightProps;
     defaultRef: HTMLDivElement;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 interface HoverCardContext {
-    openDropdown(): void;
-    closeDropdown(): void;
+    openDropdown: () => void;
+    closeDropdown: () => void;
 }
 export declare const HoverCardContextProvider: ({ children, value }: {
     value: HoverCardContext;