@mantine/core 8.0.0-alpha.1 → 8.0.0-alpha.3

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

@@ -1,4 +1,4 @@
-import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineFontSize, StylesApiProps } from '../../../core';
 export type InputDescriptionStylesNames = 'description';
 export type InputDescriptionCssVariables = {
     description: '--input-description-size';
@@ -7,7 +7,7 @@ export interface InputDescriptionProps extends BoxProps, StylesApiProps<InputDes
     __staticSelector?: string;
     __inheritStyles?: boolean;
     /** Controls description `font-size`, `'sm'` by default */
-    size?: MantineSize | (string & {});
+    size?: MantineFontSize;
 }
 export type InputDescriptionFactory = Factory<{
     props: InputDescriptionProps;

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

@@ -1,4 +1,4 @@
-import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineFontSize, StylesApiProps } from '../../../core';
 export type InputErrorStylesNames = 'error';
 export type InputErrorCssVariables = {
     error: '--input-error-size';
@@ -7,7 +7,7 @@ export interface InputErrorProps extends BoxProps, StylesApiProps<InputErrorFact
     __staticSelector?: string;
     __inheritStyles?: boolean;
     /** Controls error `font-size`, `'sm'` by default */
-    size?: MantineSize | (string & {});
+    size?: MantineFontSize;
 }
 export type InputErrorFactory = Factory<{
     props: InputErrorProps;

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

@@ -1,4 +1,4 @@
-import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineFontSize, StylesApiProps } from '../../../core';
 export type InputLabelStylesNames = 'label' | 'required';
 export type InputLabelCssVariables = {
     label: '--input-asterisk-color' | '--input-label-size';
@@ -8,7 +8,7 @@ export interface InputLabelProps extends BoxProps, StylesApiProps<InputLabelFact
     /** Determines whether the required asterisk should be displayed  */
     required?: boolean;
     /** Controls label `font-size`, `'sm'` by default */
-    size?: MantineSize | (string & {});
+    size?: MantineFontSize;
     /** Root element of the label, `'label'` by default */
     labelElement?: 'label' | 'div';
 }

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

@@ -1,4 +1,4 @@
-import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../../core';
+import { BoxProps, ElementProps, Factory, MantineFontSize, StylesApiProps } from '../../../core';
 import { InputDescriptionCssVariables, InputDescriptionStylesNames } from '../InputDescription/InputDescription';
 import { InputErrorCssVariables, InputErrorStylesNames } from '../InputError/InputError';
 import { InputLabelCssVariables, InputLabelStylesNames } from '../InputLabel/InputLabel';
@@ -33,7 +33,7 @@ export interface InputWrapperProps extends __InputWrapperProps, BoxProps, Styles
     /** Static id used as base to generate `aria-` attributes, by default generates random id */
     id?: string;
     /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */
-    size?: MantineSize | (string & {});
+    size?: MantineFontSize;
     /** `Input.Label` root element, `'label'` by default */
     labelElement?: 'label' | 'div';
 }

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

@@ -8,19 +8,18 @@ interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
     __stylesApiProps?: Record<string, any>;
     id?: string;
 }
-export declare function useInputProps<T extends BaseProps, U extends Partial<T>>(component: string, defaultProps: U, _props: T): Omit<T & { [Key in Extract<keyof T, never>]-?: {}[Key] | NonNullable<T[Key]>; }, "size" | "style" | "styles" | "label" | "className" | "id" | "vars" | "variant" | "unstyled" | "classNames" | "mod" | "error" | "description" | "__staticSelector" | "required" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
+export declare function useInputProps<T extends BaseProps, U extends Partial<T>>(component: string, defaultProps: U, _props: T): Omit<T & { [Key in Extract<keyof T, never>]-?: {}[Key] | NonNullable<T[Key]>; }, "variant" | "style" | "size" | "label" | "required" | "className" | "id" | "description" | "error" | "__staticSelector" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "mod" | "unstyled" | "classNames" | "styles" | "vars" | "wrapperProps"> & {
     classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
     styles: Partial<Record<string, import("../../core").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../../core").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;
     wrapperProps: {
-        hidden?: boolean | undefined;
         color?: string | undefined;
-        content?: string | undefined;
+        children?: import("react").ReactNode | undefined;
         style: import("react").CSSProperties | ((theme: import("../../core").MantineTheme) => import("../../core").CSSProperties) | import("../../core").MantineStyleProp[] | undefined;
-        translate?: "yes" | "no" | undefined;
         slot?: string | undefined;
         title?: string | undefined;
         key?: import("react").Key | null | undefined;
+        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;
@@ -29,19 +28,22 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className: string | undefined;
-        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
-        draggable?: (boolean | "false" | "true") | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
         id: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
-        spellCheck?: (boolean | "false" | "true") | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined;
+        translate?: "yes" | "no" | undefined;
         radioGroup?: string | undefined;
         role?: import("react").AriaRole | undefined;
         about?: string | undefined;
+        content?: string | undefined;
         datatype?: string | undefined;
         inlist?: any;
         prefix?: string | undefined;
@@ -68,11 +70,11 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: (boolean | "false" | "true") | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
-        "aria-busy"?: (boolean | "false" | "true") | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
@@ -83,44 +85,43 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
-        "aria-disabled"?: (boolean | "false" | "true") | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: (boolean | "false" | "true") | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-        "aria-hidden"?: (boolean | "false" | "true") | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
         "aria-level"?: number | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: (boolean | "false" | "true") | undefined;
-        "aria-multiline"?: (boolean | "false" | "true") | undefined;
-        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined;
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-readonly"?: (boolean | "false" | "true") | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: (boolean | "false" | "true") | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
         "aria-rowindex"?: number | undefined;
         "aria-rowindextext"?: string | undefined;
         "aria-rowspan"?: number | undefined;
-        "aria-selected"?: (boolean | "false" | "true") | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
         "aria-setsize"?: number | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
         "aria-valuemax"?: number | undefined;
         "aria-valuemin"?: number | undefined;
         "aria-valuenow"?: number | undefined;
         "aria-valuetext"?: string | undefined;
-        children?: import("react").ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;
@@ -140,7 +141,6 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -306,7 +306,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         styles: Partial<Record<string, import("../../core").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../../core").CSSProperties>>) | undefined;
         size: (string & {}) | import("../../core").MantineSize | undefined;
         inputContainer: ((children: React.ReactNode) => React.ReactNode) | undefined;
-        inputWrapperOrder: ("input" | "label" | "error" | "description")[] | undefined;
+        inputWrapperOrder: ("input" | "label" | "description" | "error")[] | undefined;
         withAsterisk: boolean | undefined;
         variant: string | undefined;
         mod: import("../../core").BoxMod | undefined;

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

@@ -51,6 +51,7 @@ export declare namespace Menu {
         props: MenuProps;
         stylesNames: MenuStylesNames;
     }>;
+    var withProps: (props: Partial<MenuProps>) => MenuProps;
     var classes: Record<string, string>;
     var displayName: string;
     var Item: (<C = "button">(props: import("../../core").PolymorphicComponentProps<C, import("./MenuItem/MenuItem").MenuItemProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(import("./MenuItem/MenuItem").MenuItemProps & {

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

@@ -1,4 +1,4 @@
-import { BoxProps, MantineColor, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
+import { BoxProps, MantineColor, MantineSpacing, PolymorphicFactory, StylesApiProps } from '../../core';
 export type NavLinkStylesNames = 'root' | 'section' | 'body' | 'label' | 'description' | 'chevron' | 'collapse' | 'children';
 export type NavLinkVariant = 'filled' | 'light' | 'subtle';
 export type NavLinkCssVariables = {
@@ -31,7 +31,7 @@ export interface NavLinkProps extends BoxProps, StylesApiProps<NavLinkFactory> {
     /** If set, right section will not be rotated when collapse is opened, `false` by default */
     disableRightSectionRotation?: boolean;
     /** Key of `theme.spacing` or any valid CSS value to set collapsed links `padding-left`, `'lg'` by default */
-    childrenOffset?: MantineSize | (string & {}) | number;
+    childrenOffset?: MantineSpacing;
     /** If set, disabled styles will be added to the root element, `false` by default */
     disabled?: boolean;
     /** Called when the link is clicked */

package/lib/components/Notification/Notification.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
+import { LoaderProps } from '../Loader';
 export type NotificationStylesNames = 'root' | 'icon' | 'loader' | 'body' | 'title' | 'description' | 'closeButton';
 export type NotificationCssVariables = {
     root: '--notification-radius' | '--notification-color';
@@ -25,6 +26,8 @@ export interface NotificationProps extends BoxProps, StylesApiProps<Notification
     withCloseButton?: boolean;
     /** Props passed down to the close button */
     closeButtonProps?: Record<string, any>;
+    /** Props passed down to `Loader` component */
+    loaderProps?: LoaderProps;
 }
 export type NotificationFactory = Factory<{
     props: NotificationProps;

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

@@ -1,4 +1,4 @@
-import { Factory, MantineSize } from '../../core';
+import { Factory, MantineSpacing } from '../../core';
 import { PaginationIcon } from './Pagination.icons';
 import { PaginationControl } from './PaginationControl/PaginationControl';
 import { PaginationDots } from './PaginationDots/PaginationDots';
@@ -25,7 +25,7 @@ export interface PaginationProps extends PaginationRootProps {
     /** Dots icon component */
     dotsIcon?: PaginationIcon;
     /** Key of `theme.spacing`, gap between controls, `8` by default */
-    gap?: MantineSize | (string & {}) | number;
+    gap?: MantineSpacing;
     /** Determines whether the pagination should be hidden when only one page is available (`total={1}`), `false` by default */
     hideWithOnePage?: boolean;
     /** Determines whether pages controls should be displayed, `true` by default */

package/lib/components/Pill/Pill.d.ts

@@ -1,4 +1,5 @@
 import { BoxProps, ElementProps, Factory, MantineRadius, MantineSize, StylesApiProps } from '../../core';
+import { CloseButtonProps } from '../CloseButton';
 import { PillGroup } from './PillGroup/PillGroup';
 export type PillStylesNames = 'root' | 'label' | 'remove';
 export type PillVariant = 'default' | 'contrast';
@@ -13,7 +14,7 @@ export interface PillProps extends BoxProps, StylesApiProps<PillFactory>, Elemen
     /** Called when the remove button is clicked */
     onRemove?: () => void;
     /** Props passed down to the remove button */
-    removeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
+    removeButtonProps?: CloseButtonProps & React.ComponentPropsWithoutRef<'button'>;
     /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. `'xl'` by default. */
     radius?: MantineRadius;
     /** If pill is disabled it has higher contrast to be visible on the disabled input background and the remove button is hidden */

package/lib/components/PillsInput/PillsInput.d.ts

@@ -4,7 +4,6 @@ import { PillsInputField } from './PillsInputField/PillsInputField';
 export interface PillsInputProps extends BoxProps, __BaseInputProps, StylesApiProps<PillsInputFactory>, ElementProps<'div', 'size'> {
     __stylesApiProps?: Record<string, any>;
     __staticSelector?: string;
-    multiline?: boolean;
 }
 export type PillsInputFactory = Factory<{
     props: PillsInputProps;

package/lib/components/ScrollArea/ScrollArea.d.ts

@@ -20,7 +20,7 @@ export interface ScrollAreaProps extends BoxProps, StylesApiProps<ScrollAreaFact
     /** Axis at which scrollbars must be rendered, `'xy'` by default */
     scrollbars?: 'x' | 'y' | 'xy' | false;
     /** Determines whether scrollbars should be offset with padding on given axis, `false` by default */
-    offsetScrollbars?: boolean | 'x' | 'y';
+    offsetScrollbars?: boolean | 'x' | 'y' | 'present';
     /** Assigns viewport element (scrollable container) ref */
     viewportRef?: React.ForwardedRef<HTMLDivElement>;
     /** Props passed down to the viewport element */

package/lib/components/Table/TableScrollContainer.d.ts

@@ -1,11 +1,13 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 export type TableScrollContainerStylesNames = 'scrollContainer' | 'scrollContainerInner';
 export type TableScrollContainerCssVariables = {
-    scrollContainer: '--table-min-width' | '--table-overflow';
+    scrollContainer: '--table-min-width' | '--table-max-height' | '--table-overflow';
 };
 export interface TableScrollContainerProps extends BoxProps, StylesApiProps<TableScrollContainerFactory>, ElementProps<'div'> {
     /** `min-width` of the `Table` at which it should become scrollable */
     minWidth: React.CSSProperties['minWidth'];
+    /** `max-height` of the `Table` at which it should become scrollable */
+    maxHeight?: React.CSSProperties['maxHeight'];
     /** Type of the scroll container, `native` to use native scrollbars, `scrollarea` to use `ScrollArea` component, `scrollarea` by default */
     type?: 'native' | 'scrollarea';
 }

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

@@ -1,4 +1,4 @@
-import { BoxProps, MantineColor, MantineGradient, MantineSize, PolymorphicFactory, StylesApiProps } from '../../core';
+import { BoxProps, MantineColor, MantineFontSize, MantineGradient, MantineLineHeight, PolymorphicFactory, StylesApiProps } from '../../core';
 type TextTruncate = 'end' | 'start' | boolean;
 export type TextStylesNames = 'root';
 export type TextVariant = 'text' | 'gradient';
@@ -8,7 +8,7 @@ export type TextCssVariables = {
 export interface TextProps extends BoxProps, StylesApiProps<TextFactory> {
     __staticSelector?: string;
     /** Controls `font-size` and `line-height`, `'md'` by default */
-    size?: MantineSize | (string & {});
+    size?: MantineFontSize & MantineLineHeight;
     /** Number of lines after which Text will be truncated */
     lineClamp?: number;
     /** Side on which Text must be truncated, if `true`, text is truncated from the start */

package/lib/components/Title/Title.d.ts

@@ -1,6 +1,6 @@
-import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineFontSize, StylesApiProps } from '../../core';
 export type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
-export type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'] | MantineSize;
+export type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'] | MantineFontSize;
 export type TitleStylesNames = 'root';
 export type TitleCssVariables = {
     root: '--title-fw' | '--title-lh' | '--title-fz' | '--title-line-clamp' | '--title-text-wrap';

package/lib/core/MantineProvider/theme.types.d.ts

@@ -119,18 +119,35 @@ export interface HeadingStyle {
     lineHeight: string;
 }
 export type MantineSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type MantineBreakpointsValues = Record<MantineSize | (string & {}), string>;
-export type MantineFontSizesValues = Record<MantineSize | (string & {}), string>;
-export type MantineRadiusValues = Record<MantineSize | (string & {}), string>;
-export type MantineSpacingValues = Record<MantineSize | (string & {}), string>;
-export type MantineShadowsValues = Record<MantineSize | (string & {}), string>;
-export type MantineLineHeightValues = Record<MantineSize | (string & {}), string>;
-export type MantineBreakpoint = keyof MantineBreakpointsValues;
-export type MantineFontSize = keyof MantineFontSizesValues;
-export type MantineRadius = keyof MantineRadiusValues | (string & {}) | number;
-export type MantineSpacing = keyof MantineSpacingValues | (string & {}) | number;
-export type MantineShadow = keyof MantineShadowsValues | (string & {});
-export type MantineLineHeight = keyof MantineLineHeightValues;
+export type DefaultMantineSize = MantineSize;
+export interface MantineThemeSizesOverride {
+}
+export type MantineBreakpoint = (MantineThemeSizesOverride extends {
+    breakpoints: Record<infer CustomBreakpoints, string>;
+} ? CustomBreakpoints : MantineSize) | (string & {});
+export type MantineBreakpointsValues = Record<MantineBreakpoint, string>;
+export type MantineFontSize = (MantineThemeSizesOverride extends {
+    fontSizes: Record<infer CustomFontSizes, string>;
+} ? CustomFontSizes : MantineSize) | (string & {});
+export type MantineFontSizesValues = Record<MantineFontSize, string>;
+type _MantineRadius = (MantineThemeSizesOverride extends {
+    radius: Record<infer CustomRadius, string>;
+} ? CustomRadius : MantineSize) | (string & {});
+export type MantineRadius = _MantineRadius | number;
+export type MantineRadiusValues = Record<_MantineRadius, string>;
+type _MantineSpacing = (MantineThemeSizesOverride extends {
+    spacing: Record<infer CustomSpacing, string>;
+} ? CustomSpacing : MantineSize) | (string & {});
+export type MantineSpacing = _MantineSpacing | number;
+export type MantineSpacingValues = Record<MantineSpacing, string>;
+export type MantineShadow = (MantineThemeSizesOverride extends {
+    shadows: Record<infer CustomShadow, string>;
+} ? CustomShadow : MantineSize) | (string & {});
+export type MantineShadowsValues = Record<MantineShadow, string>;
+export type MantineLineHeight = (MantineThemeSizesOverride extends {
+    lineHeights: Record<infer CustomLineHeight, string>;
+} ? CustomLineHeight : MantineSize) | (string & {});
+export type MantineLineHeightValues = Record<MantineLineHeight, string>;
 export interface MantineThemeOther {
     [key: string]: any;
 }
@@ -164,3 +181,4 @@ export type MantineThemeColors = MantineThemeColorsOverride extends {
     colors: Record<infer CustomColors, MantineColorsTuple>;
 } ? Record<CustomColors, MantineColorsTuple> : Record<DefaultMantineColor, MantineColorsTuple>;
 export type MantineColor = keyof MantineThemeColors;
+export {};

package/lib/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.d.ts

@@ -1,2 +1,2 @@
 import { UseMediaQueryOptions } from '@mantine/hooks';
-export declare function useComputedColorScheme(defaultValue?: 'light' | 'dark', options?: UseMediaQueryOptions): "light" | "dark";
+export declare function useComputedColorScheme(defaultValue?: 'light' | 'dark', options?: UseMediaQueryOptions): "dark" | "light";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.3",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "8.0.0-alpha.1",
+    "@mantine/hooks": "8.0.0-alpha.3",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },

package/styles/AppShell.css

@@ -4,6 +4,8 @@
   .m_89ab340[data-disabled] {
     --app-shell-header-offset: 0rem !important;
     --app-shell-navbar-offset: 0rem !important;
+    --app-shell-aside-offset: 0rem !important;
+    --app-shell-footer-offset: 0rem !important;
   }
   [data-mantine-color-scheme='light'] .m_89ab340 {
     --app-shell-border-color: var(--mantine-color-gray-3);

package/styles/AppShell.layer.css

@@ -4,6 +4,8 @@
   .m_89ab340[data-disabled] {
     --app-shell-header-offset: 0rem !important;
     --app-shell-navbar-offset: 0rem !important;
+    --app-shell-aside-offset: 0rem !important;
+    --app-shell-footer-offset: 0rem !important;
   }
   [data-mantine-color-scheme='light'] .m_89ab340 {
     --app-shell-border-color: var(--mantine-color-gray-3);

package/styles/Input.css

@@ -222,14 +222,6 @@
     color: var(--input-disabled-color);
   }
 
-/* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
-
-@supports (-moz-appearance: none) {
-    .m_8fb7ebe7[readonly][aria-haspopup] {
-      pointer-events: none;
-    }
-  }
-
 .m_82577fc2 {
   pointer-events: var(--section-pointer-events);
   position: absolute;

package/styles/Input.layer.css

@@ -222,14 +222,6 @@
     color: var(--input-disabled-color);
   }
 
-/* Fixes odd Firefox behavior in Select – https://github.com/mantinedev/mantine/issues/7476 */
-
-@supports (-moz-appearance: none) {
-    .m_8fb7ebe7[readonly][aria-haspopup] {
-      pointer-events: none;
-    }
-  }
-
 .m_82577fc2 {
   pointer-events: var(--section-pointer-events);
   position: absolute;

package/styles/Notification.css

@@ -35,10 +35,6 @@
     background-color: var(--mantine-color-dark-6);
 }
 
-  .m_a513464:where([data-with-icon]) {
-    padding-inline-start: var(--mantine-spacing-xs);
-  }
-
   .m_a513464:where([data-with-icon])::before {
       display: none;
     }

package/styles/Notification.layer.css

@@ -35,10 +35,6 @@
     background-color: var(--mantine-color-dark-6);
 }
 
-  .m_a513464:where([data-with-icon]) {
-    padding-inline-start: var(--mantine-spacing-xs);
-  }
-
   .m_a513464:where([data-with-icon])::before {
       display: none;
     }

package/styles/Paper.css

@@ -11,10 +11,14 @@
   background-color: var(--mantine-color-body);
 }
 
-  :where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+  [data-mantine-color-scheme='light'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-gray-3);
 }
 
-  :where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-dark-4);
 }
+
+  .m_1b7284a3:where([data-with-border]) {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
+  }

package/styles/Paper.layer.css

@@ -11,11 +11,15 @@
   background-color: var(--mantine-color-body);
 }
 
-  :where([data-mantine-color-scheme='light']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-3);
+  [data-mantine-color-scheme='light'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-gray-3);
 }
 
-  :where([data-mantine-color-scheme='dark']) .m_1b7284a3:where([data-with-border]) {
-      border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
+  [data-mantine-color-scheme='dark'] .m_1b7284a3 {
+    --paper-border-color: var(--mantine-color-dark-4);
 }
+
+  .m_1b7284a3:where([data-with-border]) {
+    border: calc(0.0625rem * var(--mantine-scale)) solid var(--paper-border-color);
+  }
 }

package/styles/ScrollArea.css

@@ -18,14 +18,39 @@
     display: none;
   }
 
-.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='y']) {
-      padding-inline-end: var(--scrollarea-scrollbar-size);
-      padding-inline-start: unset;
-    }
-
-.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where([data-offset-scrollbars='xy'], [data-offset-scrollbars='x']) {
-      padding-bottom: var(--scrollarea-scrollbar-size);
-    }
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='y'],
+        [data-offset-scrollbars='present']
+      ):where([data-vertical-hidden]) {
+        padding-inline-end: 0;
+        padding-inline-start: 0;
+      }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='y']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='y'],
+        [data-offset-scrollbars='present']
+      ):not([data-vertical-hidden]) {
+        padding-inline-end: var(--scrollarea-scrollbar-size);
+        padding-inline-start: unset;
+      }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='x'],
+        [data-offset-scrollbars='present']
+      ):where([data-horizontal-hidden]) {
+        padding-bottom: 0;
+      }
+
+.m_c0783ff9:where([data-scrollbars='xy'], [data-scrollbars='x']):where(
+        [data-offset-scrollbars='xy'],
+        [data-offset-scrollbars='x'],
+        [data-offset-scrollbars='present']
+      ):not([data-horizontal-hidden]) {
+        padding-bottom: var(--scrollarea-scrollbar-size);
+      }
 
 .m_f8f631dd {
   min-width: 100%;