@mantine/core 7.0.0-alpha.17 → 7.0.0-alpha.19

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, MantineRadius, PolymorphicFactory } from '../../core';
 export type BackgroundImageStylesNames = 'root';
-export type BackgroundImageVariant = string;
 export type BackgroundImageCssVariables = {
     root: '--bi-radius';
 };
@@ -15,7 +14,6 @@ export type BackgroundImageFactory = PolymorphicFactory<{
     props: BackgroundImageProps;
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
-    variant: BackgroundImageVariant;
     stylesNames: BackgroundImageStylesNames;
     vars: BackgroundImageCssVariables;
 }>;
@@ -29,14 +27,12 @@ export declare const BackgroundImage: (<C = "div">(props: import("../../core/fac
     props: BackgroundImageProps;
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
-    variant: BackgroundImageVariant;
     stylesNames: BackgroundImageStylesNames;
     vars: BackgroundImageCssVariables;
 }> & import("../../core/factory/factory").ComponentClasses<{
     props: BackgroundImageProps;
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
-    variant: BackgroundImageVariant;
     stylesNames: BackgroundImageStylesNames;
     vars: BackgroundImageCssVariables;
 }> & Record<string, never>;

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

@@ -1,2 +1,2 @@
 export { BackgroundImage } from './BackgroundImage';
-export type { BackgroundImageProps, BackgroundImageCssVariables, BackgroundImageFactory, BackgroundImageStylesNames, BackgroundImageVariant, } from './BackgroundImage';
+export type { BackgroundImageProps, BackgroundImageCssVariables, BackgroundImageFactory, BackgroundImageStylesNames, } from './BackgroundImage';

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, ElementProps, Factory, MantineColor, MantineRadius } from '../../core';
 export type BlockquoteStylesNames = 'root' | 'icon' | 'cite';
-export type BlockquoteVariant = string;
 export type BlockquoteCssVariables = {
     root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';
 };
@@ -22,12 +21,10 @@ export type BlockquoteFactory = Factory<{
     ref: HTMLQuoteElement;
     stylesNames: BlockquoteStylesNames;
     vars: BlockquoteCssVariables;
-    variant: BlockquoteVariant;
 }>;
 export declare const Blockquote: import("../../core").MantineComponent<{
     props: BlockquoteProps;
     ref: HTMLQuoteElement;
     stylesNames: BlockquoteStylesNames;
     vars: BlockquoteCssVariables;
-    variant: BlockquoteVariant;
 }>;

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

@@ -1,2 +1,2 @@
 export { Blockquote } from './Blockquote';
-export type { BlockquoteCssVariables, BlockquoteFactory, BlockquoteProps, BlockquoteStylesNames, BlockquoteVariant, } from './Blockquote';
+export type { BlockquoteCssVariables, BlockquoteFactory, BlockquoteProps, BlockquoteStylesNames, } from './Blockquote';

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSpacing } from '../../core';
 export type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';
-export type BreadcrumbsVariant = string;
 export type BreadcrumbsCssVariables = {
     root: '--bc-separator-margin';
 };
@@ -18,12 +17,10 @@ export type BreadcrumbsFactory = Factory<{
     ref: HTMLDivElement;
     stylesNames: BreadcrumbsStylesNames;
     vars: BreadcrumbsCssVariables;
-    variant: BreadcrumbsVariant;
 }>;
 export declare const Breadcrumbs: import("../../core").MantineComponent<{
     props: BreadcrumbsProps;
     ref: HTMLDivElement;
     stylesNames: BreadcrumbsStylesNames;
     vars: BreadcrumbsCssVariables;
-    variant: BreadcrumbsVariant;
 }>;

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

@@ -1,2 +1,2 @@
 export { Breadcrumbs } from './Breadcrumbs';
-export type { BreadcrumbsCssVariables, BreadcrumbsFactory, BreadcrumbsProps, BreadcrumbsStylesNames, BreadcrumbsVariant, } from './Breadcrumbs';
+export type { BreadcrumbsCssVariables, BreadcrumbsFactory, BreadcrumbsProps, BreadcrumbsStylesNames, } from './Breadcrumbs';

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

@@ -1,6 +1,5 @@
 import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSize, MantineColor } from '../../core';
 export type BurgerStylesNames = 'root' | 'burger';
-export type BurgerVariant = string;
 export type BurgerCssVariables = {
     root: '--burger-color' | '--burger-size' | '--burger-transition-duration' | '--burger-transition-timing-function';
 };
@@ -21,12 +20,10 @@ export type BurgerFactory = Factory<{
     ref: HTMLButtonElement;
     stylesNames: BurgerStylesNames;
     vars: BurgerCssVariables;
-    variant: BurgerVariant;
 }>;
 export declare const Burger: import("../../core").MantineComponent<{
     props: BurgerProps;
     ref: HTMLButtonElement;
     stylesNames: BurgerStylesNames;
     vars: BurgerCssVariables;
-    variant: BurgerVariant;
 }>;

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

@@ -1,2 +1,2 @@
 export { Burger } from './Burger';
-export type { BurgerCssVariables, BurgerFactory, BurgerProps, BurgerStylesNames, BurgerVariant, } from './Burger';
+export type { BurgerCssVariables, BurgerFactory, BurgerProps, BurgerStylesNames } from './Burger';

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, Factory } from '../../../core';
-export type ButtonGroupStylesNames = 'root';
-export type ButtonGroupVariant = string;
+export type ButtonGroupStylesNames = 'group';
 export type ButtonGroupCssVariables = {
-    root: '--button-border-width';
+    group: '--button-border-width';
 };
 export interface ButtonGroupProps extends BoxProps, StylesApiProps<ButtonGroupFactory> {
     /** `Button` components */
@@ -16,14 +15,12 @@ export interface ButtonGroupProps extends BoxProps, StylesApiProps<ButtonGroupFa
 export type ButtonGroupFactory = Factory<{
     props: ButtonGroupProps;
     ref: HTMLDivElement;
-    variant: ButtonGroupVariant;
     stylesNames: ButtonGroupStylesNames;
     vars: ButtonGroupCssVariables;
 }>;
 export declare const ButtonGroup: import("../../../core").MantineComponent<{
     props: ButtonGroupProps;
     ref: HTMLDivElement;
-    variant: ButtonGroupVariant;
     stylesNames: ButtonGroupStylesNames;
     vars: ButtonGroupCssVariables;
 }>;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BoxProps, StylesApiProps, PolymorphicFactory } from '../../core';
 export type CenterStylesNames = 'root';
-export type CenterVariant = string;
 export type CenterCssVariables = {
     root: '--center-display';
 };
@@ -17,7 +16,6 @@ export type CenterFactory = PolymorphicFactory<{
     defaultComponent: 'div';
     stylesNames: CenterStylesNames;
     vars: CenterCssVariables;
-    variant: CenterVariant;
 }>;
 export declare const Center: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, CenterProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(CenterProps & {
     component?: any;
@@ -31,12 +29,10 @@ export declare const Center: (<C = "div">(props: import("../../core/factory/crea
     defaultComponent: 'div';
     stylesNames: CenterStylesNames;
     vars: CenterCssVariables;
-    variant: CenterVariant;
 }> & import("../../core/factory/factory").ComponentClasses<{
     props: CenterProps;
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
     stylesNames: CenterStylesNames;
     vars: CenterCssVariables;
-    variant: CenterVariant;
 }> & Record<string, never>;

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

@@ -1,2 +1,2 @@
 export { Center } from './Center';
-export type { CenterProps, CenterCssVariables, CenterFactory, CenterStylesNames, CenterVariant, } from './Center';
+export type { CenterProps, CenterCssVariables, CenterFactory, CenterStylesNames } from './Center';

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

@@ -3,7 +3,6 @@ import { BoxProps, StylesApiProps, ElementProps, MantineColor, MantineSize, Mant
 import { InlineInputStylesNames } from '../InlineInput';
 import { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
 export type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;
-export type CheckboxVariant = string;
 export type CheckboxCssVariables = {
     root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color';
 };
@@ -39,7 +38,6 @@ export type CheckboxFactory = Factory<{
     ref: HTMLInputElement;
     stylesNames: CheckboxStylesNames;
     vars: CheckboxCssVariables;
-    variant: CheckboxVariant;
     staticComponents: {
         Group: typeof CheckboxGroup;
     };
@@ -49,7 +47,6 @@ export declare const Checkbox: import("../../core").MantineComponent<{
     ref: HTMLInputElement;
     stylesNames: CheckboxStylesNames;
     vars: CheckboxCssVariables;
-    variant: CheckboxVariant;
     staticComponents: {
         Group: typeof CheckboxGroup;
     };

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { MantineSize, Factory } from '../../../core';
 import { InputWrapperStylesNames, InputWrapperProps } from '../../Input';
 export type CheckboxGroupStylesNames = InputWrapperStylesNames;
-export type CheckboxGroupVariant = string;
 export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'onChange'> {
     /** `Checkbox` components */
     children: React.ReactNode;

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

@@ -2,5 +2,5 @@ export { Checkbox } from './Checkbox';
 export { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
 export { CheckIcon } from './CheckIcon';
 export type { CheckboxIconProps, CheckIconProps } from './CheckIcon';
-export type { CheckboxCssVariables, CheckboxFactory, CheckboxProps, CheckboxStylesNames, CheckboxVariant, } from './Checkbox';
-export type { CheckboxGroupFactory, CheckboxGroupProps, CheckboxGroupStylesNames, CheckboxGroupVariant, } from './CheckboxGroup/CheckboxGroup';
+export type { CheckboxCssVariables, CheckboxFactory, CheckboxProps, CheckboxStylesNames, } from './Checkbox';
+export type { CheckboxGroupFactory, CheckboxGroupProps, CheckboxGroupStylesNames, } from './CheckboxGroup/CheckboxGroup';

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineRadius, MantineSize, MantineColor } from '../../core';
+import { ChipGroup } from './ChipGroup/ChipGroup';
+export type ChipStylesNames = 'root' | 'input' | 'iconWrapper' | 'checkIcon' | 'label';
+export type ChipVariant = 'outline' | 'filled' | 'light';
+export type ChipCssVariables = {
+    root: '--chip-fz' | '--chip-size' | '--chip-icon-size' | '--chip-padding' | '--chip-checked-padding' | '--chip-radius' | '--chip-bg' | '--chip-hover' | '--chip-color' | '--chip-bd' | '--chip-spacing';
+};
+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 | (string & {}) | number;
+    /** Controls various properties, `'sm'` by default */
+    size?: MantineSize;
+    /** Chip input type */
+    type?: 'radio' | 'checkbox';
+    /** Chip label */
+    children: React.ReactNode;
+    /** Checked state for controlled component */
+    checked?: boolean;
+    /** 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` */
+    color?: MantineColor;
+    /** Static id to bind input with label */
+    id?: string;
+    /** Props passed down to the wrapper element */
+    wrapperProps?: Record<string, any>;
+    /** Replaces default icon */
+    icon?: React.ReactNode;
+}
+export type ChipFactory = Factory<{
+    props: ChipProps;
+    ref: HTMLInputElement;
+    stylesNames: ChipStylesNames;
+    vars: ChipCssVariables;
+    variant: ChipVariant;
+    staticComponents: {
+        Group: typeof ChipGroup;
+    };
+}>;
+export declare const Chip: import("../../core").MantineComponent<{
+    props: ChipProps;
+    ref: HTMLInputElement;
+    stylesNames: ChipStylesNames;
+    vars: ChipCssVariables;
+    variant: ChipVariant;
+    staticComponents: {
+        Group: typeof ChipGroup;
+    };
+}>;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ChipGroupProps<T extends boolean = false> {
+    /** Allow multiple values to be selected at a time */
+    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 */
+    children?: React.ReactNode;
+}
+export declare function ChipGroup<T extends boolean>(props: ChipGroupProps<T>): JSX.Element;
+export declare namespace ChipGroup {
+    var displayName: string;
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface ChipGroupContextValue {
+    isChipSelected(value: string): boolean;
+    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    multiple: boolean;
+}
+export declare const ChipGroupProvider: ({ children, value }: {
+    value: ChipGroupContextValue;
+    children: import("react").ReactNode;
+}) => JSX.Element, useChipGroupContext: () => ChipGroupContextValue | null;
+export {};

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

@@ -0,0 +1,4 @@
+export { Chip } from './Chip';
+export { ChipGroup } from './ChipGroup/ChipGroup';
+export type { ChipCssVariables, ChipFactory, ChipProps, ChipStylesNames, ChipVariant, } from './Chip';
+export type { ChipGroupProps } from './ChipGroup/ChipGroup';

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

@@ -1,6 +1,5 @@
 import { BoxProps, StylesApiProps, ElementProps, MantineColor, Factory } from '../../core';
 export type CodeStylesNames = 'root';
-export type CodeVariant = string;
 export type CodeCssVariables = {
     root: '--code-bg';
 };
@@ -15,12 +14,10 @@ export type CodeFactory = Factory<{
     ref: HTMLElement;
     stylesNames: CodeStylesNames;
     vars: CodeCssVariables;
-    variant: CodeVariant;
 }>;
 export declare const Code: import("../../core").MantineComponent<{
     props: CodeProps;
     ref: HTMLElement;
     stylesNames: CodeStylesNames;
     vars: CodeCssVariables;
-    variant: CodeVariant;
 }>;

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

@@ -1,2 +1,2 @@
 export { Code } from './Code';
-export type { CodeProps, CodeCssVariables, CodeFactory, CodeStylesNames, CodeVariant, } from './Code';
+export type { CodeProps, CodeCssVariables, CodeFactory, CodeStylesNames } from './Code';

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

@@ -1,7 +1,6 @@
 import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } 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 ColorPickerVariant = string;
 export type ColorPickerCssVariables = {
     wrapper: '--cp-preview-size' | '--cp-width' | '--cp-body-spacing' | '--cp-swatch-size' | '--cp-thumb-size' | '--cp-saturation-height';
 };
@@ -45,12 +44,10 @@ export type ColorPickerFactory = Factory<{
     ref: HTMLDivElement;
     stylesNames: ColorPickerStylesNames;
     vars: ColorPickerCssVariables;
-    variant: ColorPickerVariant;
 }>;
 export declare const ColorPicker: import("../../core").MantineComponent<{
     props: ColorPickerProps;
     ref: HTMLDivElement;
     stylesNames: ColorPickerStylesNames;
     vars: ColorPickerCssVariables;
-    variant: ColorPickerVariant;
 }>;

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

@@ -1,2 +1,2 @@
 export { ColorPicker } from './ColorPicker';
-export type { ColorPickerCssVariables, ColorPickerFactory, ColorPickerProps, ColorPickerStylesNames, ColorPickerVariant, } from './ColorPicker';
+export type { ColorPickerCssVariables, ColorPickerFactory, ColorPickerProps, ColorPickerStylesNames, } from './ColorPicker';

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BoxProps, MantineRadius, StylesApiProps, PolymorphicFactory } from '../../core';
 export type ColorSwatchStylesNames = 'root' | 'alphaOverlay' | 'shadowOverlay' | 'colorOverlay' | 'childrenOverlay';
-export type ColorSwatchVariant = string;
 export type ColorSwatchCssVariables = {
     root: '--cs-radius' | '--cs-size';
 };
@@ -23,12 +22,10 @@ export type ColorSwatchFactory = PolymorphicFactory<{
     defaultComponent: 'div';
     stylesNames: ColorSwatchStylesNames;
     vars: ColorSwatchCssVariables;
-    variant: ColorSwatchVariant;
 }>;
 export declare const ColorSwatch: (<C = "div">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, ColorSwatchProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(ColorSwatchProps & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof ColorSwatchProps> & {
-    /** Controls `width` and `height` of the swatch, any valid CSS value, numbers are converted to rem */
     ref?: any;
 }) | (ColorSwatchProps & {
     component: React.ElementType<any>;
@@ -38,12 +35,10 @@ export declare const ColorSwatch: (<C = "div">(props: import("../../core/factory
     defaultComponent: 'div';
     stylesNames: ColorSwatchStylesNames;
     vars: ColorSwatchCssVariables;
-    variant: ColorSwatchVariant;
 }> & import("../../core/factory/factory").ComponentClasses<{
     props: ColorSwatchProps;
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
     stylesNames: ColorSwatchStylesNames;
     vars: ColorSwatchCssVariables;
-    variant: ColorSwatchVariant;
 }> & Record<string, never>;

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

@@ -1,2 +1,2 @@
 export { ColorSwatch } from './ColorSwatch';
-export type { ColorSwatchCssVariables, ColorSwatchFactory, ColorSwatchProps, ColorSwatchStylesNames, ColorSwatchVariant, } from './ColorSwatch';
+export type { ColorSwatchCssVariables, ColorSwatchFactory, ColorSwatchProps, ColorSwatchStylesNames, } from './ColorSwatch';

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

@@ -95,7 +95,7 @@ export declare namespace Combobox {
     var Chevron: import("../../core").MantineComponent<{
         props: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronProps;
         ref: SVGSVGElement;
-        stylesNames: "root";
+        stylesNames: "chevron";
         vars: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronCSSVariables;
     }>;
     var Footer: import("../../core").MantineComponent<{

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

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

package/lib/components/Combobox/OptionsDropdown/validate-options.d.ts

@@ -0,0 +1 @@
+export declare function validateOptions(options: any[], valuesSet?: Set<unknown>): void;

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

@@ -1,6 +1,5 @@
 import { BoxProps, StylesApiProps, ElementProps, MantineSize, Factory } from '../../core';
 export type ContainerStylesNames = 'root';
-export type ContainerVariant = string;
 export type ContainerCssVariables = {
     root: '--container-size';
 };
@@ -15,12 +14,10 @@ export type ContainerFactory = Factory<{
     ref: HTMLDivElement;
     stylesNames: ContainerStylesNames;
     vars: ContainerCssVariables;
-    variant: ContainerVariant;
 }>;
 export declare const Container: import("../../core").MantineComponent<{
     props: ContainerProps;
     ref: HTMLDivElement;
     stylesNames: ContainerStylesNames;
     vars: ContainerCssVariables;
-    variant: ContainerVariant;
 }>;

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

@@ -1,2 +1,2 @@
 export { Container } from './Container';
-export type { ContainerProps, ContainerCssVariables, ContainerFactory, ContainerStylesNames, ContainerVariant, } from './Container';
+export type { ContainerProps, ContainerCssVariables, ContainerFactory, ContainerStylesNames, } from './Container';

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

@@ -9,7 +9,6 @@ import { DrawerContent } from './DrawerContent';
 import { DrawerTitle } from './DrawerTitle';
 import { DrawerHeader } from './DrawerHeader';
 export type DrawerStylesNames = DrawerRootStylesNames;
-export type DrawerVariant = string;
 export type DrawerCssVariables = DrawerRootCssVariables;
 export interface DrawerProps extends DrawerRootProps {
     /** Drawer title */
@@ -30,7 +29,6 @@ export type DrawerFactory = Factory<{
     ref: HTMLDivElement;
     stylesNames: DrawerStylesNames;
     vars: DrawerCssVariables;
-    variant: DrawerVariant;
     staticComponents: {
         Root: typeof DrawerRoot;
         Overlay: typeof DrawerOverlay;
@@ -46,7 +44,6 @@ export declare const Drawer: import("../../core").MantineComponent<{
     ref: HTMLDivElement;
     stylesNames: DrawerStylesNames;
     vars: DrawerCssVariables;
-    variant: DrawerVariant;
     staticComponents: {
         Root: typeof DrawerRoot;
         Overlay: typeof DrawerOverlay;

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

@@ -3,7 +3,6 @@ import { ModalBaseProps, ModalBaseStylesNames } from '../ModalBase';
 import { ScrollAreaComponent } from './Drawer.context';
 type DrawerPosition = 'bottom' | 'left' | 'right' | 'top';
 export type DrawerRootStylesNames = ModalBaseStylesNames;
-export type DrawerRootVariant = string;
 export type DrawerRootCssVariables = {
     root: '--drawer-size' | '--drawer-flex' | '--drawer-height' | '--drawer-align' | '--drawer-justify';
 };
@@ -18,7 +17,6 @@ export type DrawerRootFactory = Factory<{
     ref: HTMLDivElement;
     stylesNames: DrawerRootStylesNames;
     vars: DrawerRootCssVariables;
-    variant: DrawerRootVariant;
     compound: true;
 }>;
 export declare const DrawerRoot: import("../../core").MantineComponent<{
@@ -26,7 +24,6 @@ export declare const DrawerRoot: import("../../core").MantineComponent<{
     ref: HTMLDivElement;
     stylesNames: DrawerRootStylesNames;
     vars: DrawerRootCssVariables;
-    variant: DrawerRootVariant;
     compound: true;
 }>;
 export {};

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

@@ -6,7 +6,7 @@ export { DrawerContent } from './DrawerContent';
 export { DrawerHeader } from './DrawerHeader';
 export { DrawerOverlay } from './DrawerOverlay';
 export { DrawerTitle } from './DrawerTitle';
-export type { DrawerCssVariables, DrawerFactory, DrawerProps, DrawerStylesNames, DrawerVariant, } from './Drawer';
+export type { DrawerCssVariables, DrawerFactory, DrawerProps, DrawerStylesNames } from './Drawer';
 export type { DrawerRootProps } from './DrawerRoot';
 export type { DrawerBodyProps } from './DrawerBody';
 export type { DrawerCloseButtonProps } from './DrawerCloseButton';

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

@@ -1,8 +1,8 @@
 interface UseDelayedHoverInput {
     open(): void;
     close(): void;
-    openDelay: number;
-    closeDelay: number;
+    openDelay: number | undefined;
+    closeDelay: number | undefined;
 }
 export declare function useDelayedHover({ open, close, openDelay, closeDelay }: UseDelayedHoverInput): {
     openDropdown: () => void;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { GetStylesApi } from '../../core';
+import type { GridFactory } from './Grid';
+interface GridContextValue {
+    getStyles: GetStylesApi<GridFactory>;
+    grow: boolean | undefined;
+    columns: number;
+}
+export declare const GridProvider: ({ children, value }: {
+    value: GridContextValue;
+    children: import("react").ReactNode;
+}) => JSX.Element, useGridContext: () => GridContextValue;
+export {};

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { BoxProps, StylesApiProps, ElementProps, Factory, StyleProp, MantineSpacing } from '../../core';
+import { GridCol } from './GridCol/GridCol';
+export type GridStylesNames = 'root' | 'col' | 'inner';
+export type GridCssVariables = {
+    root: '--grid-justify' | '--grid-align';
+};
+export interface GridProps extends BoxProps, StylesApiProps<GridFactory>, ElementProps<'div'> {
+    /** Gutter between columns, key of `theme.spacing` or any valid CSS value, `'md'` by default */
+    gutter?: StyleProp<MantineSpacing | (string & {}) | number>;
+    /** Determines whether columns in the last row should expand to fill all available space, `false` by default */
+    grow?: boolean;
+    /** Sets `justify-content`, `flex-start` by default */
+    justify?: React.CSSProperties['justifyContent'];
+    /** Sets `align-items`, `stretch` by default */
+    align?: React.CSSProperties['alignItems'];
+    /** Number of columns in each row, `12` by default */
+    columns?: number;
+}
+export type GridFactory = Factory<{
+    props: GridProps;
+    ref: HTMLDivElement;
+    stylesNames: GridStylesNames;
+    vars: GridCssVariables;
+    staticComponents: {
+        Col: typeof GridCol;
+    };
+}>;
+export declare const Grid: import("../../core").MantineComponent<{
+    props: GridProps;
+    ref: HTMLDivElement;
+    stylesNames: GridStylesNames;
+    vars: GridCssVariables;
+    staticComponents: {
+        Col: typeof GridCol;
+    };
+}>;

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

@@ -0,0 +1,23 @@
+import { BoxProps, StylesApiProps, ElementProps, Factory, StyleProp } from '../../../core';
+export type GridColStylesNames = 'col';
+export type ColSpan = number | 'auto' | 'content';
+export interface GridColProps extends BoxProps, StylesApiProps<GridColFactory>, ElementProps<'div'> {
+    /** Column span, `12` by default */
+    span?: StyleProp<ColSpan>;
+    /** Column order, can be used to reorder columns at different viewport sizes */
+    order?: StyleProp<number>;
+    /** Column offset on the left side – number of columns that should be left empty before this column */
+    offset?: StyleProp<number>;
+}
+export type GridColFactory = Factory<{
+    props: GridColProps;
+    ref: HTMLDivElement;
+    stylesNames: GridColStylesNames;
+    compound: true;
+}>;
+export declare const GridCol: import("../../../core").MantineComponent<{
+    props: GridColProps;
+    ref: HTMLDivElement;
+    stylesNames: GridColStylesNames;
+    compound: true;
+}>;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { GridColProps } from './GridCol';
+interface GridColVariablesProps extends GridColProps {
+    selector: string;
+}
+export declare function GridColVariables({ span, order, offset, selector }: GridColVariablesProps): JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { GridProps } from './Grid';
+interface GridVariablesProps extends GridProps {
+    selector: string;
+}
+export declare function GridVariables({ gutter, selector }: GridVariablesProps): JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+export { Grid } from './Grid';
+export { GridCol } from './GridCol/GridCol';
+export type { GridCssVariables, GridFactory, GridProps, GridStylesNames } from './Grid';
+export type { GridColProps } from './GridCol/GridCol';