@mantine/core 7.3.1 → 7.4.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, PolymorphicFactory, MantineSize, MantineRadius, MantineColor, MantineGradient } from '../../core';
+import { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
 export type BadgeStylesNames = 'root' | 'section' | 'label';
 export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'transparent' | 'white' | 'default' | 'gradient';
 export type BadgeCssVariables = {
@@ -8,6 +8,8 @@ export type BadgeCssVariables = {
 export interface BadgeProps extends BoxProps, StylesApiProps<BadgeFactory> {
     /** Controls `font-size`, `height` and horizontal `padding`, `'md'` by default */
     size?: MantineSize | (string & {});
+    /** If set, badge `min-width` becomes equal to its `height` and horizontal padding is removed */
+    circle?: boolean;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `'xl'` by default */
     radius?: MantineRadius;
     /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
@@ -22,6 +24,8 @@ export interface BadgeProps extends BoxProps, StylesApiProps<BadgeFactory> {
     fullWidth?: boolean;
     /** Main badge content */
     children?: React.ReactNode;
+    /** 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;
 }
 export type BadgeFactory = PolymorphicFactory<{
     props: BadgeProps;

package/lib/components/Blockquote/Blockquote.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor, MantineRadius } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
 export type BlockquoteStylesNames = 'root' | 'icon' | 'cite';
 export type BlockquoteCssVariables = {
     root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';

package/lib/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSpacing } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
 export type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';
 export type BreadcrumbsCssVariables = {
     root: '--bc-separator-margin';

package/lib/components/Burger/Burger.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineColor } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
 export type BurgerStylesNames = 'root' | 'burger';
 export type BurgerCssVariables = {
     root: '--burger-color' | '--burger-size' | '--burger-transition-duration' | '--burger-transition-timing-function';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, PolymorphicFactory, MantineSize, MantineColor, MantineRadius, MantineGradient } from '../../core';
+import { BoxProps, MantineColor, MantineGradient, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
 import { LoaderProps } from '../Loader';
 import { ButtonGroup } from './ButtonGroup/ButtonGroup';
 export type ButtonStylesNames = 'root' | 'inner' | 'loader' | 'section' | 'label';
@@ -33,6 +33,8 @@ export interface ButtonProps extends BoxProps, StylesApiProps<ButtonFactory> {
     loading?: boolean;
     /** Props added to the `Loader` component (only visible when `loading` prop is set) */
     loaderProps?: LoaderProps;
+    /** Determines whether button 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;
 }
 export type ButtonFactory = PolymorphicFactory<{
     props: ButtonProps;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, Factory } from '../../../core';
+import { BoxProps, Factory, StylesApiProps } from '../../../core';
 export type ButtonGroupStylesNames = 'group';
 export type ButtonGroupCssVariables = {
     group: '--button-border-width';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, PolymorphicFactory, MantineShadow, MantineRadius, MantineSpacing } from '../../core';
+import { BoxProps, MantineRadius, MantineShadow, MantineSpacing, PolymorphicFactory, StylesApiProps } from '../../core';
 import { CardSection } from './CardSection/CardSection';
 export type CardStylesNames = 'root' | 'section';
 export type CardCssVariables = {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, PolymorphicFactory } from '../../core';
+import { BoxProps, PolymorphicFactory, StylesApiProps } from '../../core';
 export type CenterStylesNames = 'root';
 export interface CenterProps extends BoxProps, StylesApiProps<CenterFactory> {
     /** Content that should be centered vertically and horizontally */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, MantineColor, MantineSize, MantineRadius, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 import { InlineInputStylesNames } from '../InlineInput';
 import { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
 export type CheckboxVariant = 'filled' | 'outline';
@@ -8,13 +8,13 @@ export type CheckboxCssVariables = {
     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 used to connect input with the label. If not set, unique id is generated instead. */
     id?: string;
-    /** Checkbox label */
+    /** Content of the `label` associated with the checkbox */
     label?: React.ReactNode;
     /** 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 */
+    /** Controls size of the component, `'sm'` by default */
     size?: MantineSize | (string & {});
     /** Key of `theme.radius` or any valid CSS value to set `border-radius,` `theme.defaultRadius` by default */
     radius?: MantineRadius;
@@ -24,19 +24,21 @@ export interface CheckboxProps extends BoxProps, StylesApiProps<CheckboxFactory>
     labelPosition?: 'left' | 'right';
     /** Description displayed below the label */
     description?: React.ReactNode;
-    /** Error displayed below the label */
+    /** Error message displayed below the label */
     error?: React.ReactNode;
-    /** Indeterminate state of checkbox, if set, `checked` prop is ignored */
+    /** Indeterminate state of the checkbox. If set, `checked` prop is ignored. */
     indeterminate?: boolean;
-    /** Icon rendered when checkbox has checked or indeterminate state */
+    /** Icon displayed when checkbox is in checked or indeterminate state */
     icon?: React.FC<{
         indeterminate: boolean | undefined;
         className: string;
     }>;
-    /** Assigns ref of the root element, can be used with `Tooltip` and other similar components */
+    /** Assigns ref of the root element */
     rootRef?: React.ForwardedRef<HTMLDivElement>;
-    /** Key of `theme.colors` or any valid CSS color to set icon color, `theme.white` by default */
+    /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */
     iconColor?: MantineColor;
+    /** Determines whether icon 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;
 }
 export type CheckboxFactory = Factory<{
     props: CheckboxProps;

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

@@ -1,17 +1,17 @@
 import React from 'react';
-import { MantineSize, Factory } from '../../../core';
-import { InputWrapperStylesNames, InputWrapperProps } from '../../Input';
+import { Factory, MantineSize } from '../../../core';
+import { InputWrapperProps, InputWrapperStylesNames } from '../../Input';
 export type CheckboxGroupStylesNames = InputWrapperStylesNames;
 export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'onChange'> {
-    /** `Checkbox` components */
+    /** `Checkbox` components and any other elements */
     children: React.ReactNode;
     /** Controlled component value */
     value?: string[];
     /** Default value for uncontrolled component */
     defaultValue?: string[];
-    /** Called when value changes */
+    /** Called with an array of selected checkboxes values when value changes */
     onChange?: (value: string[]) => void;
-    /** Props passed down to the `Input.Wrapper` */
+    /** Props passed down to the root element (`Input.Wrapper` component) */
     wrapperProps?: Record<string, any>;
     /** Controls size of the `Input.Wrapper`, `'sm'` by default */
     size?: MantineSize | (string & {});

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineRadius, MantineSize, MantineColor } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 import { ChipGroup } from './ChipGroup/ChipGroup';
 export type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';
 export type ChipVariant = 'outline' | 'filled' | 'light';
@@ -13,7 +13,7 @@ export interface ChipProps extends BoxProps, StylesApiProps<ChipFactory>, Elemen
     size?: MantineSize;
     /** Chip input type, `'checkbox'` by default */
     type?: 'radio' | 'checkbox';
-    /** Chip label */
+    /** `label` element associated with the input */
     children: React.ReactNode;
     /** Checked state for controlled component */
     checked?: boolean;
@@ -21,16 +21,18 @@ export interface ChipProps extends BoxProps, StylesApiProps<ChipFactory>, Elemen
     defaultChecked?: boolean;
     /** Calls when checked state changes */
     onChange?: (checked: boolean) => void;
-    /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */
+    /** Controls components colors based on `variant` prop. Key of `theme.colors` or any valid CSS color. `theme.primaryColor` by default */
     color?: MantineColor;
-    /** Static id to bind input with label, by default id is randomly generated */
+    /** Static id to connect input with the label, by default `id` is randomly generated */
     id?: string;
-    /** Props passed down to the wrapper element */
+    /** Props passed down to the root element */
     wrapperProps?: Record<string, any>;
-    /** Replaces default icon */
+    /** Any element or component to replace default icon */
     icon?: React.ReactNode;
-    /** Assigns ref of the root element, can be used with `Tooltip` and other similar components */
+    /** Assigns ref of the root element */
     rootRef?: React.ForwardedRef<HTMLDivElement>;
+    /** Determines whether button 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;
 }
 export type ChipFactory = Factory<{
     props: ChipProps;

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

@@ -6,9 +6,9 @@ export interface ChipGroupProps<T extends boolean = false> {
     value?: T extends true ? string[] : string | null;
     /** Uncontrolled component initial value */
     defaultValue?: T extends true ? string[] : string | null;
-    /** Called when value changes */
+    /** Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. */
     onChange?: (value: T extends true ? string[] : string) => void;
-    /** `Chip` components */
+    /** `Chip` components and any other elements */
     children?: React.ReactNode;
 }
 export declare function ChipGroup<T extends boolean>(props: ChipGroupProps<T>): React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PolymorphicFactory, MantineSize, MantineRadius, BoxProps, StylesApiProps } from '../../core';
+import { BoxProps, MantineRadius, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
 export type CloseButtonVariant = 'subtle' | 'transparent';
 export type CloseButtonStylesNames = 'root';
 export type CloseButtonCssVariables = {
@@ -17,6 +17,8 @@ export interface __CloseButtonProps {
     iconSize?: number | string;
     /** Content rendered inside the button, for example `VisuallyHidden` with label for screen readers */
     children?: React.ReactNode;
+    /** Replaces default close icon. If set, `iconSize` prop is ignored. */
+    icon?: React.ReactNode;
 }
 export interface CloseButtonProps extends __CloseButtonProps, BoxProps, StylesApiProps<CloseButtonFactory> {
 }

package/lib/components/Code/Code.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, StylesApiProps, ElementProps, MantineColor, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
 export type CodeStylesNames = 'root';
 export type CodeCssVariables = {
     root: '--code-bg';

package/lib/components/ColorInput/ColorInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { __ColorPickerProps, ColorPickerStylesNames } from '../ColorPicker';
-import { __BaseInputProps, InputVariant, __InputStylesNames } from '../Input';
+import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
 import { PopoverProps } from '../Popover';
 export type ColorInputStylesNames = 'dropdown' | 'eyeDropperButton' | 'eyeDropperIcon' | 'colorPreview' | ColorPickerStylesNames | __InputStylesNames;
 export type ColorInputCssVariables = {
@@ -13,13 +13,13 @@ export interface ColorInputProps extends BoxProps, __BaseInputProps, __ColorPick
     disallowInput?: boolean;
     /** Determines whether the input value should be reset to the last known valid value when the input loses focus, `true` by default */
     fixOnBlur?: boolean;
-    /** Props passed down to the Popover component */
+    /** Props passed down to the `Popover` component */
     popoverProps?: PopoverProps;
     /** Determines whether the preview color swatch should be displayed in the left section of the input, `true` by default */
     withPreview?: boolean;
     /** Determines whether eye dropper button should be displayed in the right section, `true` by default */
     withEyeDropper?: boolean;
-    /** An icon that will replace the default eye dropper icon */
+    /** An icon to replace the default eye dropper icon */
     eyeDropperIcon?: React.ReactNode;
     /** Determines whether the dropdown should be closed when one of the color swatches is clicked, `false` by default */
     closeOnColorSwatchClick?: boolean;

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

@@ -1,4 +1,4 @@
-import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../core';
 import { ColorFormat } from './ColorPicker.types';
 export type ColorPickerStylesNames = 'wrapper' | 'preview' | 'body' | 'sliders' | 'slider' | 'sliderOverlay' | 'thumb' | 'saturation' | 'thumb' | 'saturationOverlay' | 'thumb' | 'swatches' | 'swatch';
 export type ColorPickerCssVariables = {
@@ -9,32 +9,32 @@ export interface __ColorPickerProps {
     value?: string;
     /** Uncontrolled component default value */
     defaultValue?: string;
-    /** Called when color changes */
+    /** Called when value changes */
     onChange?: (value: string) => void;
-    /** Called when user stops dragging or changes value with arrow keys */
+    /** Called when the user stops dragging one of the sliders or changes the value with arrow keys */
     onChangeEnd?: (value: string) => void;
     /** Color format, `'hex'` by default */
     format?: ColorFormat;
-    /** Determines whether color picker should be displayed, `true` by default */
+    /** Determines whether the color picker should be displayed, `true` by default */
     withPicker?: boolean;
-    /** Color swatches */
+    /** An array of colors in one of the supported formats. Used to render swatches list below the color picker. */
     swatches?: string[];
-    /** Number of swatches displayed in one row, `7` by default */
+    /** Number of swatches per row, `7` by default */
     swatchesPerRow?: number;
     /** Controls size of hue, alpha and saturation sliders, `'md'` by default */
     size?: MantineSize | (string & {});
 }
 export interface ColorPickerProps extends BoxProps, __ColorPickerProps, StylesApiProps<ColorPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
     __staticSelector?: string;
-    /** Determines whether component should take 100% width of its container, `false` by default */
+    /** Determines whether the component should take 100% width of its container, `false` by default */
     fullWidth?: boolean;
-    /** Determines whether interactive elements should be focusable, `true` by default */
+    /** Determines whether interactive elements (sliders thumbs and swatches) should be focusable, `true` by default */
     focusable?: boolean;
-    /** Saturation slider `aria-label` */
+    /** Saturation slider `aria-label` prop */
     saturationLabel?: string;
-    /** Hue slider `aria-label` */
+    /** Hue slider `aria-label` prop */
     hueLabel?: string;
-    /** Alpha slider `aria-label` */
+    /** Alpha slider `aria-label` prop */
     alphaLabel?: string;
     /** Called when one of the color swatches is clicked */
     onColorSwatchClick?: (color: string) => void;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../../core';
 export type ColorSliderStylesNames = 'slider' | 'sliderOverlay' | 'thumb';
 export type ColorSliderVariant = string;
 export type ColorSliderCssVariables = {

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

@@ -1,4 +1,4 @@
-import { HsvaColor, RgbaColor, ColorFormat } from '../ColorPicker.types';
+import { ColorFormat, HsvaColor, RgbaColor } from '../ColorPicker.types';
 export declare function hsvaToRgbaObject({ h, s, v, a }: HsvaColor): RgbaColor;
 export declare function hsvaToRgba(color: HsvaColor, includeAlpha: boolean): string;
 export declare function hsvaToHsl({ h, s, v, a }: HsvaColor, includeAlpha: boolean): string;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, MantineRadius, StylesApiProps, PolymorphicFactory } from '../../core';
+import { BoxProps, MantineRadius, PolymorphicFactory, StylesApiProps } from '../../core';
 export type ColorSwatchStylesNames = 'root' | 'alphaOverlay' | 'shadowOverlay' | 'colorOverlay' | 'childrenOverlay';
 export type ColorSwatchCssVariables = {
     root: '--cs-radius' | '--cs-size';

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

@@ -1,19 +1,19 @@
 import React from 'react';
-import { StylesApiProps, Factory, MantineSize, MantineThemeComponent } from '../../core';
+import { Factory, MantineSize, MantineThemeComponent, StylesApiProps } from '../../core';
 import { __PopoverProps } from '../Popover';
-import { ComboboxStore } from './use-combobox/use-combobox';
-import { ComboboxTarget } from './ComboboxTarget/ComboboxTarget';
+import { ComboboxChevron } from './ComboboxChevron/ComboboxChevron';
 import { ComboboxDropdown } from './ComboboxDropdown/ComboboxDropdown';
-import { ComboboxOptions } from './ComboboxOptions/ComboboxOptions';
-import { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';
-import { ComboboxSearch } from './ComboboxSearch/ComboboxSearch';
+import { ComboboxDropdownTarget } from './ComboboxDropdownTarget/ComboboxDropdownTarget';
 import { ComboboxEmpty } from './ComboboxEmpty/ComboboxEmpty';
-import { ComboboxChevron } from './ComboboxChevron/ComboboxChevron';
-import { ComboboxFooter } from './ComboboxFooter/ComboboxFooter';
-import { ComboboxHeader } from './ComboboxHeader/ComboboxHeader';
 import { ComboboxEventsTarget } from './ComboboxEventsTarget/ComboboxEventsTarget';
-import { ComboboxDropdownTarget } from './ComboboxDropdownTarget/ComboboxDropdownTarget';
+import { ComboboxFooter } from './ComboboxFooter/ComboboxFooter';
 import { ComboboxGroup } from './ComboboxGroup/ComboboxGroup';
+import { ComboboxHeader } from './ComboboxHeader/ComboboxHeader';
+import { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';
+import { ComboboxOptions } from './ComboboxOptions/ComboboxOptions';
+import { ComboboxSearch } from './ComboboxSearch/ComboboxSearch';
+import { ComboboxTarget } from './ComboboxTarget/ComboboxTarget';
+import { ComboboxStore } from './use-combobox/use-combobox';
 export type ComboboxStylesNames = 'options' | 'dropdown' | 'option' | 'search' | 'empty' | 'footer' | 'header' | 'group' | 'groupLabel';
 export type ComboboxCSSVariables = {
     options: '--combobox-option-fz' | '--combobox-option-padding';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MantineSize, BoxProps, ElementProps, Factory, StylesApiProps } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../../core';
 export type ComboboxChevronStylesNames = 'chevron';
 export type ComboboxChevronCSSVariables = {
     chevron: '--combobox-chevron-size';

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

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

package/lib/components/Combobox/get-options-lockup/get-options-lockup.d.ts

@@ -1,3 +1,3 @@
-import { ComboboxParsedItem, ComboboxItem } from '../Combobox.types';
+import { ComboboxItem, ComboboxParsedItem } from '../Combobox.types';
 export declare function getOptionsLockup(options: ComboboxParsedItem[]): Record<string, ComboboxItem>;
 export declare function getLabelsLockup(options: ComboboxParsedItem[]): Record<string, string>;

package/lib/components/Container/Container.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../core';
 export type ContainerStylesNames = 'root';
 export type ContainerCssVariables = {
     root: '--container-size';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../core';
 import { AffixBaseProps } from '../Affix';
 import { PaperBaseProps } from '../Paper';
 import { TransitionOverride } from '../Transition';

package/lib/components/Divider/Divider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor, MantineSize } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
 export type DividerStylesNames = 'root' | 'label';
 export type DividerVariant = 'solid' | 'dashed' | 'dotted';
 export type DividerCssVariables = {

package/lib/components/Drawer/Drawer.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { Factory } from '../../core';
-import { ModalBaseOverlayProps, ModalBaseCloseButtonProps } from '../ModalBase';
-import { DrawerRoot, DrawerRootProps, DrawerRootCssVariables, DrawerRootStylesNames } from './DrawerRoot';
+import { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';
 import { DrawerBody } from './DrawerBody';
 import { DrawerCloseButton } from './DrawerCloseButton';
-import { DrawerOverlay } from './DrawerOverlay';
 import { DrawerContent } from './DrawerContent';
-import { DrawerTitle } from './DrawerTitle';
 import { DrawerHeader } from './DrawerHeader';
+import { DrawerOverlay } from './DrawerOverlay';
+import { DrawerRoot, DrawerRootCssVariables, DrawerRootProps, DrawerRootStylesNames } from './DrawerRoot';
+import { DrawerTitle } from './DrawerTitle';
 export type DrawerStylesNames = DrawerRootStylesNames;
 export type DrawerCssVariables = DrawerRootCssVariables;
 export interface DrawerProps extends DrawerRootProps {

package/lib/components/Drawer/DrawerHeader.d.ts

@@ -5,13 +5,13 @@ export interface DrawerHeaderProps extends ModalBaseHeaderProps, CompoundStylesA
 }
 export type DrawerHeaderFactory = Factory<{
     props: DrawerHeaderProps;
-    ref: HTMLDivElement;
+    ref: HTMLElement;
     stylesNames: DrawerHeaderStylesNames;
     compound: true;
 }>;
 export declare const DrawerHeader: import("../../core").MantineComponent<{
     props: DrawerHeaderProps;
-    ref: HTMLDivElement;
+    ref: HTMLElement;
     stylesNames: DrawerHeaderStylesNames;
     compound: true;
 }>;

package/lib/components/Drawer/DrawerRoot.d.ts

@@ -1,4 +1,4 @@
-import { StylesApiProps, Factory, MantineRadius } from '../../core';
+import { Factory, MantineRadius, StylesApiProps } from '../../core';
 import { ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';
 import { ScrollAreaComponent } from './Drawer.context';
 type DrawerPosition = 'bottom' | 'left' | 'right' | 'top';

package/lib/components/Fieldset/Fieldset.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineRadius } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineRadius, StylesApiProps } from '../../core';
 export type FieldsetStylesNames = 'root' | 'legend';
 export type FieldsetVariant = 'default' | 'filled' | 'unstyled';
 export type FieldsetCSSVariables = {

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

@@ -1,7 +1,7 @@
 import React from 'react';
-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'> {
+import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
+import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
+export interface FileInputProps<Multiple = false> extends BoxProps, __BaseInputProps, StylesApiProps<FileInputFactory>, ElementProps<'button', 'value' | 'defaultValue' | 'onChange' | 'placeholder'> {
     /** Called when value changes */
     onChange?: (payload: Multiple extends true ? File[] : File | null) => void;
     /** Controlled component value */
@@ -10,13 +10,13 @@ export interface FileInputProps<Multiple = false> extends BoxProps, __BaseInputP
     defaultValue?: Multiple extends true ? File[] : File | null;
     /** Determines whether user can pick more than one file, `false` by default */
     multiple?: Multiple;
-    /** File input accept attribute, for example, "image/png,image/jpeg" */
+    /** File input accept attribute, for example, `"image/png,image/jpeg"` */
     accept?: string;
     /** Input name attribute */
     name?: string;
     /** Input form attribute */
     form?: string;
-    /** Value renderer, by default file name is rendered */
+    /** Value renderer. By default, file name is displayed. */
     valueComponent?: React.FC<{
         value: null | File | File[];
     }>;
@@ -24,12 +24,14 @@ export interface FileInputProps<Multiple = false> extends BoxProps, __BaseInputP
     clearable?: boolean;
     /** Props passed down to the clear button */
     clearButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /** Read only inputs value cannot be changed */
+    /** If set, the input value cannot be changed  */
     readOnly?: boolean;
     /** Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. */
     capture?: boolean | 'user' | 'environment';
     /** Props passed down to the hidden input element which is used to capture files */
     fileInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    /** Input placeholder */
+    placeholder?: React.ReactNode;
 }
 export type FileInputFactory = Factory<{
     props: FileInputProps;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, StyleProp, MantineSize, PolymorphicFactory } from '../../core';
+import { BoxProps, ElementProps, MantineSize, PolymorphicFactory, StyleProp, StylesApiProps } from '../../core';
 export type FlexStylesNames = 'root';
 export interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {
     /** `gap` CSS property */

package/lib/components/Floating/FloatingArrow/get-arrow-position-styles.d.ts

@@ -1,4 +1,4 @@
-import type { FloatingPosition, ArrowPosition } from '../types';
+import type { ArrowPosition, FloatingPosition } from '../types';
 export declare function getArrowPositionStyles({ position, arrowSize, arrowOffset, arrowRadius, arrowPosition, arrowX, arrowY, dir, }: {
     position: FloatingPosition;
     arrowSize: number;

package/lib/components/Grid/Grid.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, StyleProp, MantineSpacing } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineSpacing, StyleProp, StylesApiProps } from '../../core';
 import { GridCol } from './GridCol/GridCol';
 export type GridStylesNames = 'root' | 'col' | 'inner';
 export type GridCssVariables = {

package/lib/components/Group/Group.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, MantineSpacing, Factory } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
 export type GroupStylesNames = 'root';
 export type GroupCssVariables = {
     root: '--group-gap' | '--group-align' | '--group-justify' | '--group-wrap' | '--group-child-width';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { MantineColor, MantineTheme, PolymorphicFactory } from '../../core';
-import { TextStylesNames, TextProps, TextVariant } from '../Text';
+import { TextProps, TextStylesNames, TextVariant } from '../Text';
 export interface HighlightProps extends Omit<TextProps, 'color'> {
     /** Substring or an array of substrings to highlight in `children` */
     highlight: string | string[];

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Factory } from '../../core';
 import { PopoverProps, PopoverStylesNames } from '../Popover';
-import { HoverCardDropdown } from './HoverCardDropdown/HoverCardDropdown';
 import { PopoverCssVariables } from '../Popover/Popover';
+import { HoverCardDropdown } from './HoverCardDropdown/HoverCardDropdown';
 export interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {
     variant?: string;
     /** Initial opened state */

package/lib/components/Image/Image.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, PolymorphicFactory, MantineRadius } from '../../core';
+import { BoxProps, MantineRadius, PolymorphicFactory, StylesApiProps } from '../../core';
 export type ImageStylesNames = 'root';
 export type ImageCssVariables = {
     root: '--image-radius' | '--image-object-fit';

package/lib/components/Indicator/Indicator.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineRadius, MantineColor } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
 import { IndicatorPosition } from './Indicator.types';
 export type IndicatorPositionVariables = '--indicator-top' | '--indicator-bottom' | '--indicator-left' | '--indicator-right' | '--indicator-translate-x' | '--indicator-translate-y';
 export type IndicatorStylesNames = 'root' | 'indicator';
 export type IndicatorCssVariables = {
-    root: '--indicator-color' | '--indicator-size' | '--indicator-radius' | '--indicator-z-index' | IndicatorPositionVariables;
+    root: '--indicator-color' | '--indicator-text-color' | '--indicator-size' | '--indicator-radius' | '--indicator-z-index' | IndicatorPositionVariables;
 };
 export interface IndicatorProps extends BoxProps, StylesApiProps<IndicatorFactory>, ElementProps<'div'> {
     /** Indicator position relative to the target element, `'top-end'` by default */
@@ -29,6 +29,8 @@ export interface IndicatorProps extends BoxProps, StylesApiProps<IndicatorFactor
     processing?: boolean;
     /** Indicator z-index, `200` by default */
     zIndex?: string | number;
+    /** Determines whether text color 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;
 }
 export type IndicatorFactory = Factory<{
     props: IndicatorProps;