@mantine/core 7.0.2 → 7.1.0

package/lib/components/AppShell/AppShell.d.ts

@@ -1,60 +1,29 @@
 import React from 'react';
-import { BoxProps, StylesApiProps, ElementProps, Factory, MantineBreakpoint, MantineSpacing } from '../../core';
+import { BoxProps, StylesApiProps, ElementProps, Factory, MantineSpacing } from '../../core';
 import { AppShellNavbar } from './AppShellNavbar/AppShellNavbar';
 import { AppShellHeader } from './AppShellHeader/AppShellHeader';
 import { AppShellFooter } from './AppShellFooter/AppShellFooter';
 import { AppShellAside } from './AppShellAside/AppShellAside';
 import { AppShellMain } from './AppShellMain/AppShellMain';
 import { AppShellSection } from './AppShellSection/AppShellSection';
+import { AppShellAsideConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellFooterConfiguration, AppShellResponsiveSize } from './AppShell.types';
 export type AppShellStylesNames = 'root' | 'navbar' | 'main' | 'header' | 'footer' | 'aside' | 'section';
 export type AppShellCssVariables = {
     root: '--app-shell-transition-duration' | '--app-shell-transition-timing-function';
 };
-export type AppShellSize = number | (string & {});
-export interface AppShellResponsiveSize {
-    base?: AppShellSize;
-    xs?: AppShellSize;
-    sm?: AppShellSize;
-    md?: AppShellSize;
-    lg?: AppShellSize;
-    xl?: AppShellSize;
-    [key: string]: AppShellSize | undefined;
-}
 export interface AppShellProps extends BoxProps, StylesApiProps<AppShellFactory>, ElementProps<'div'> {
     /** Determines whether associated components should have a border, `true` by default */
     withBorder?: boolean;
-    /** Main content section padding, `0` by default */
+    /** Controls padding of the main section, `0` by default. !important!: use `padding` prop instead of `p`. */
     padding?: MantineSpacing | AppShellResponsiveSize;
-    /** Navbar configuration */
-    navbar?: {
-        width: AppShellSize | AppShellResponsiveSize;
-        breakpoint: MantineBreakpoint | (string & {}) | number;
-        collapsed?: {
-            desktop?: boolean;
-            mobile?: boolean;
-        };
-    };
-    /** Aside configuration */
-    aside?: {
-        width: AppShellSize | AppShellResponsiveSize;
-        breakpoint: MantineBreakpoint | (string & {}) | number;
-        collapsed?: {
-            desktop?: boolean;
-            mobile?: boolean;
-        };
-    };
-    /** Header configuration */
-    header?: {
-        height: AppShellSize | AppShellResponsiveSize;
-        collapsed?: boolean;
-        offset?: boolean;
-    };
-    /** Footer configuration */
-    footer?: {
-        height: AppShellSize | AppShellResponsiveSize;
-        collapsed?: boolean;
-        offset?: boolean;
-    };
+    /** AppShell.Navbar configuration, controls width, breakpoints and collapsed state. Required if you use AppShell.Navbar component. */
+    navbar?: AppShellNavbarConfiguration;
+    /** AppShell.Aside configuration, controls width, breakpoints and collapsed state. Required if you use AppShell.Aside component. */
+    aside?: AppShellAsideConfiguration;
+    /** AppShell.Header configuration, controls height, offset and collapsed state. Required if you use AppShell.Header component. */
+    header?: AppShellHeaderConfiguration;
+    /** AppShell.Footer configuration, controls height, offset and collapsed state. Required if you use AppShell.Footer component. */
+    footer?: AppShellFooterConfiguration;
     /** Duration of all transitions in ms, `200` by default */
     transitionDuration?: number;
     /** Timing function of all transitions, `ease` by default */
@@ -63,7 +32,7 @@ export interface AppShellProps extends BoxProps, StylesApiProps<AppShellFactory>
     zIndex?: string | number;
     /** Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default */
     layout?: 'default' | 'alt';
-    /** If set, Navbar, Aside, Header and Footer components will not be rendered */
+    /** If set, Navbar, Aside, Header and Footer components be hidden */
     disabled?: boolean;
 }
 export type AppShellFactory = Factory<{

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

@@ -0,0 +1,37 @@
+import type { MantineBreakpoint } from '../../core';
+export type AppShellSize = number | (string & {});
+export interface AppShellResponsiveSize {
+    base?: AppShellSize;
+    xs?: AppShellSize;
+    sm?: AppShellSize;
+    md?: AppShellSize;
+    lg?: AppShellSize;
+    xl?: AppShellSize;
+    [key: string]: AppShellSize | undefined;
+}
+export interface AppShellNavbarConfiguration {
+    width: AppShellSize | AppShellResponsiveSize;
+    breakpoint: MantineBreakpoint | (string & {}) | number;
+    collapsed?: {
+        desktop?: boolean;
+        mobile?: boolean;
+    };
+}
+export interface AppShellAsideConfiguration {
+    width: AppShellSize | AppShellResponsiveSize;
+    breakpoint: MantineBreakpoint | (string & {}) | number;
+    collapsed?: {
+        desktop?: boolean;
+        mobile?: boolean;
+    };
+}
+export interface AppShellHeaderConfiguration {
+    height: AppShellSize | AppShellResponsiveSize;
+    collapsed?: boolean;
+    offset?: boolean;
+}
+export interface AppShellFooterConfiguration {
+    height: AppShellSize | AppShellResponsiveSize;
+    collapsed?: boolean;
+    offset?: boolean;
+}

package/lib/components/AppShell/AppShellMediaStyles/get-base-size/get-base-size.d.ts

@@ -1,2 +1,2 @@
-import type { AppShellSize, AppShellResponsiveSize } from '../../AppShell';
+import type { AppShellSize, AppShellResponsiveSize } from '../../AppShell.types';
 export declare function getBaseSize(size: AppShellSize | AppShellResponsiveSize): AppShellSize | undefined;

package/lib/components/AppShell/AppShellMediaStyles/is-primitive-size/is-primitive-size.d.ts

@@ -1,2 +1,2 @@
-import type { AppShellSize, AppShellResponsiveSize } from '../../AppShell';
+import type { AppShellSize, AppShellResponsiveSize } from '../../AppShell.types';
 export declare function isPrimitiveSize(size: AppShellSize | AppShellResponsiveSize | undefined): size is AppShellSize | AppShellResponsiveSize;

package/lib/components/AppShell/AppShellMediaStyles/is-responsive-size/is-responsive-size.d.ts

@@ -1,2 +1,2 @@
-import type { AppShellSize, AppShellResponsiveSize } from '../../AppShell';
+import type { AppShellSize, AppShellResponsiveSize } from '../../AppShell.types';
 export declare function isResponsiveSize(size: AppShellSize | AppShellResponsiveSize | undefined): size is AppShellResponsiveSize;

package/lib/components/AppShell/AppShellSection/AppShellSection.d.ts

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

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

@@ -5,7 +5,8 @@ export { AppShellHeader } from './AppShellHeader/AppShellHeader';
 export { AppShellNavbar } from './AppShellNavbar/AppShellNavbar';
 export { AppShellSection } from './AppShellSection/AppShellSection';
 export { AppShellMain } from './AppShellMain/AppShellMain';
-export type { AppShellProps, AppShellCssVariables, AppShellFactory, AppShellResponsiveSize, AppShellSize, AppShellStylesNames, } from './AppShell';
+export type { AppShellAsideConfiguration, AppShellHeaderConfiguration, AppShellNavbarConfiguration, AppShellFooterConfiguration, AppShellResponsiveSize, } from './AppShell.types';
+export type { AppShellProps, AppShellCssVariables, AppShellFactory, AppShellStylesNames, } from './AppShell';
 export type { AppShellAsideProps } from './AppShellAside/AppShellAside';
 export type { AppShellFooterProps } from './AppShellFooter/AppShellFooter';
 export type { AppShellHeaderProps } from './AppShellHeader/AppShellHeader';

package/lib/components/Avatar/Avatar.d.ts

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

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

@@ -21,8 +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;
 }) | (BackgroundImageProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: BackgroundImageProps;
     defaultRef: HTMLDivElement;

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

@@ -35,8 +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;
 }) | (BadgeProps & {
-    component: React.ElementType<any>;
+    component: React.ElementType<any>; /** Controls `font-size`, `height` and horizontal `padding`, `'md'` by default */
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: BadgeProps;
     defaultRef: HTMLDivElement;

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

@@ -49,8 +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;
 }) | (ButtonProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: ButtonProps;
     defaultRef: HTMLButtonElement;

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

@@ -31,8 +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;
 }) | (CardProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: CardProps;
     defaultRef: HTMLDivElement;

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

@@ -18,8 +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;
 }) | (CardSectionProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../../core/factory/factory").ThemeExtend<{
     props: CardSectionProps;
     defaultRef: HTMLDivElement;

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

@@ -17,8 +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;
 }) | (CenterProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: CenterProps;
     defaultRef: HTMLDivElement;

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

@@ -32,8 +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;
 }) | (CloseButtonProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: CloseButtonProps;
     defaultComponent: 'button';

package/lib/components/Collapse/use-collapse.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CSSProperties } from '../../core';
 export declare function getElementHeight(el: React.RefObject<HTMLElement> | {
     current?: {
         scrollHeight: number;
@@ -12,7 +13,7 @@ interface UseCollapse {
 }
 interface GetCollapseProps {
     [key: string]: unknown;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     onTransitionEnd?: (e: TransitionEvent) => void;
     refKey?: string;
     ref?: React.ForwardedRef<HTMLDivElement>;

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

@@ -27,8 +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;
 }) | (ColorSwatchProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: ColorSwatchProps;
     defaultRef: HTMLDivElement;

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

@@ -22,8 +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;
 }) | (HighlightProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: HighlightProps;
     defaultRef: HTMLDivElement;

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

@@ -27,8 +27,10 @@ export declare const Image: (<C = "img">(props: import("../../core/factory/creat
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof ImageProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (ImageProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: ImageProps;
     defaultRef: HTMLImageElement;

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

@@ -82,8 +82,10 @@ export declare const Input: (<C = "input">(props: import("../../core/factory/cre
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof InputProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (InputProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: InputProps;
     defaultRef: HTMLInputElement;

package/lib/components/Input/use-input-props.d.ts

@@ -27,7 +27,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         descriptionProps: Record<string, any> | undefined;
         unstyled: boolean | undefined;
         styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
-        size: import("../../core").MantineSize | (string & {}) | undefined;
+        size: (string & {}) | import("../../core").MantineSize | undefined;
         style: import("../../core").MantineStyleProp;
         inputContainer: ((children: import("react").ReactNode) => import("react").ReactNode) | undefined;
         inputWrapperOrder: ("input" | "label" | "error" | "description")[] | undefined;
@@ -40,7 +40,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
         styles: Partial<Record<string, import("react").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("react").CSSProperties>>) | undefined;
         unstyled: boolean | undefined;
-        size: import("../../core").MantineSize | (string & {}) | undefined;
+        size: (string & {}) | import("../../core").MantineSize | undefined;
         __staticSelector: string | undefined;
         __stylesApiProps: Record<string, any>;
         error: import("react").ReactNode;

package/lib/components/InputBase/InputBase.d.ts

@@ -22,8 +22,10 @@ export declare const InputBase: (<C = "input">(props: import("../../core/factory
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof InputBaseProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (InputBaseProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: InputBaseProps;
     defaultRef: HTMLInputElement;

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

@@ -57,8 +57,10 @@ export declare namespace Menu {
         component?: any;
     } & Omit<Omit<any, "ref">, "component" | keyof import("./MenuItem/MenuItem").MenuItemProps> & {
         ref?: any;
+        renderRoot?(props: any): any;
     }) | (import("./MenuItem/MenuItem").MenuItemProps & {
         component: React.ElementType<any>;
+        renderRoot?(props: Record<string, any>): any;
     })>, never> & import("../../core/factory/factory").ThemeExtend<{
         props: import("./MenuItem/MenuItem").MenuItemProps;
         defaultRef: HTMLButtonElement;

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

@@ -26,8 +26,10 @@ export declare const MenuItem: (<C = "button">(props: import("../../../core/fact
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof MenuItemProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (MenuItemProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../../core/factory/factory").ThemeExtend<{
     props: MenuItemProps;
     defaultRef: HTMLButtonElement;

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

@@ -33,6 +33,8 @@ export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLi
     clearable?: boolean;
     /** Props passed down to the clear button */
     clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
 }
 export type MultiSelectFactory = Factory<{
     props: MultiSelectProps;

package/lib/components/NavLink/NavLink.d.ts

@@ -50,8 +50,10 @@ export declare const NavLink: (<C = "a">(props: import("../../core/factory/creat
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof NavLinkProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (NavLinkProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: NavLinkProps;
     defaultRef: HTMLAnchorElement;

package/lib/components/Overlay/Overlay.d.ts

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

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

@@ -14,34 +14,44 @@ export declare function createEdgeComponent({ icon, name, action, type }: Create
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (PaginationEdgeProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & Record<string, never>;
 export declare const PaginationNext: (<C = "button">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaginationEdgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaginationEdgeProps & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (PaginationEdgeProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & Record<string, never>;
 export declare const PaginationPrevious: (<C = "button">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaginationEdgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaginationEdgeProps & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (PaginationEdgeProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & Record<string, never>;
 export declare const PaginationFirst: (<C = "button">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaginationEdgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaginationEdgeProps & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (PaginationEdgeProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & Record<string, never>;
 export declare const PaginationLast: (<C = "button">(props: import("../../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, PaginationEdgeProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(PaginationEdgeProps & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof PaginationEdgeProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (PaginationEdgeProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & Record<string, never>;

package/lib/components/Paper/Paper.d.ts

@@ -25,8 +25,10 @@ export declare const Paper: (<C = "div">(props: import("../../core/factory/creat
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof PaperProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (PaperProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: PaperProps;
     defaultComponent: 'div';

package/lib/components/PinInput/PinInput.d.ts

@@ -51,6 +51,8 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
     inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | undefined;
     /** `aria-label` for the inputs */
     ariaLabel?: string;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
 }
 export type PinInputFactory = Factory<{
     props: PinInputProps;

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

@@ -31,6 +31,8 @@ export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikePro
     clearable?: boolean;
     /** Props passed down to the clear button */
     clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
 }
 export type SelectFactory = Factory<{
     props: SelectProps;

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

@@ -59,6 +59,8 @@ export interface RangeSliderProps extends BoxProps, StylesApiProps<RangeSliderFa
     thumbFromLabel?: string;
     /** Second thumb `aria-label` */
     thumbToLabel?: string;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
 }
 export type RangeSliderFactory = Factory<{
     props: RangeSliderProps;

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

@@ -52,6 +52,8 @@ export interface SliderProps extends BoxProps, StylesApiProps<SliderFactory>, El
     scale?(value: number): number;
     /** Determines whether track value representation should be inverted, `false` by default */
     inverted?: boolean;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
 }
 export type SliderFactory = Factory<{
     props: SliderProps;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { BoxProps, StylesApiProps, ElementProps, Factory } from '../../core';
 import { ComboboxLikeProps, ComboboxLikeStylesNames } from '../Combobox';
 import { __BaseInputProps, __InputStylesNames } from '../Input';
@@ -28,6 +29,8 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, ComboboxLike
     clearable?: boolean;
     /** Props passed down to the clear button */
     clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
+    /** Props passed down to the hidden input */
+    hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
 }
 export type TagsInputFactory = Factory<{
     props: TagsInputProps;

package/lib/components/Text/Text.d.ts

@@ -38,8 +38,10 @@ export declare const Text: (<C = "p">(props: import("../../core/factory/create-p
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof TextProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (TextProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: TextProps;
     defaultComponent: 'p';

package/lib/components/UnstyledButton/UnstyledButton.d.ts

@@ -14,8 +14,10 @@ export declare const UnstyledButton: (<C = "button">(props: import("../../core/f
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof UnstyledButtonProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (UnstyledButtonProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & import("../../core/factory/factory").ThemeExtend<{
     props: UnstyledButtonProps;
     stylesNames: UnstyledButtonStylesNames;

package/lib/core/Box/Box.d.ts

@@ -29,6 +29,8 @@ export declare const Box: (<C = "div">(props: import("../factory/create-polymorp
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof BoxComponentProps> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (BoxComponentProps & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & Record<string, never>;

package/lib/core/Box/Box.types.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import type { MantineTheme } from '../MantineProvider';
-type MantineStyle = React.CSSProperties | ((theme: MantineTheme) => React.CSSProperties);
+export interface CSSProperties extends React.CSSProperties {
+    [key: string]: any;
+}
+type MantineStyle = CSSProperties | ((theme: MantineTheme) => CSSProperties);
 export type MantineStyleProp = MantineStyle | MantineStyle[] | MantineStyleProp[] | undefined;
 export type CssVariable = `--${string}`;
 export type CssVariables<Variable extends string = CssVariable> = Partial<Record<Variable, string>>;

package/lib/core/factory/create-polymorphic-component.d.ts

@@ -9,12 +9,16 @@ type InheritedProps<C extends ElementType, Props = {}> = ExtendedProps<PropsOf<C
 export type PolymorphicRef<C> = C extends React.ElementType ? React.ComponentPropsWithRef<C>['ref'] : never;
 export type PolymorphicComponentProps<C, Props = {}> = C extends React.ElementType ? InheritedProps<C, Props & ComponentProp<C>> & {
     ref?: PolymorphicRef<C>;
+    renderRoot?(props: any): any;
 } : Props & {
     component: React.ElementType;
+    renderRoot?(props: Record<string, any>): any;
 };
 export declare function createPolymorphicComponent<ComponentDefaultType, Props, StaticComponents = Record<string, never>>(component: any): (<C = ComponentDefaultType>(props: PolymorphicComponentProps<C, Props>) => React.ReactElement) & Omit<React.FunctionComponent<(Props & ComponentProp<any> & Omit<Omit<any, "ref">, "component" | keyof Props> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (Props & {
     component: React.ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & StaticComponents;
 export {};

package/lib/core/factory/polymorphic-factory.d.ts

@@ -9,6 +9,8 @@ export declare function polymorphicFactory<Payload extends PolymorphicFactoryPay
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof Payload["props"]> & {
     ref?: any;
+    renderRoot?(props: any): any;
 }) | (Payload["props"] & {
     component: import("react").ElementType<any>;
+    renderRoot?(props: Record<string, any>): any;
 })>, never> & ThemeExtend<Payload> & ComponentClasses<Payload> & StaticComponents<Payload["staticComponents"]>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mantine/core",
   "description": "React components library focused on usability, accessibility and developer experience",
-  "version": "7.0.2",
+  "version": "7.1.0",
   "main": "./cjs/index.js",
   "types": "./lib/index.d.ts",
   "module": "./esm/index.mjs",
@@ -17,6 +17,7 @@
       }
     },
     "./styles.css": "./esm/index.css",
+    "./styles.layer.css": "./esm/index.layer.css",
     "./styles/*": "./esm/styles/*"
   },
   "license": "MIT",
@@ -42,7 +43,7 @@
     "design"
   ],
   "peerDependencies": {
-    "@mantine/hooks": "7.0.2",
+    "@mantine/hooks": "7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },