@mantine/core 7.0.0-beta.0 → 7.0.0-beta.2

package/esm/core/MantineProvider/use-mantine-color-scheme/use-provider-color-scheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-provider-color-scheme.js","sources":["../../../../src/core/MantineProvider/use-mantine-color-scheme/use-provider-color-scheme.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport type { MantineColorSchemeManager } from '../color-scheme-managers';\nimport type { MantineColorScheme } from '../theme.types';\n\nfunction setColorSchemeAttribute(\n  colorScheme: MantineColorScheme,\n  getRootElement: () => HTMLElement | undefined\n) {\n  const computedColorScheme =\n    colorScheme !== 'auto'\n      ? colorScheme\n      : window.matchMedia('(prefers-color-scheme: dark)').matches\n      ? 'dark'\n      : 'light';\n  getRootElement()?.setAttribute('data-mantine-color-scheme', computedColorScheme);\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\ninterface UseProviderColorSchemeOptions {\n  manager: MantineColorSchemeManager;\n  defaultColorScheme: MantineColorScheme;\n  getRootElement(): HTMLElement | undefined;\n}\n\nexport function useProviderColorScheme({\n  manager,\n  defaultColorScheme,\n  getRootElement,\n}: UseProviderColorSchemeOptions) {\n  const media = useRef<MediaQueryList>();\n  const [value, setValue] = useState(() => manager.get(defaultColorScheme));\n\n  const setColorScheme = useCallback(\n    (colorScheme: MantineColorScheme) => {\n      setValue(colorScheme);\n      setColorSchemeAttribute(colorScheme, getRootElement);\n      manager.set(colorScheme);\n    },\n    [manager.set, value]\n  );\n\n  const clearColorScheme = useCallback(() => {\n    setValue(defaultColorScheme);\n    setColorSchemeAttribute(defaultColorScheme, getRootElement);\n    manager.clear();\n  }, [manager.clear, defaultColorScheme]);\n\n  useEffect(() => {\n    manager.subscribe(setColorScheme);\n    return manager.unsubscribe;\n  }, [manager.subscribe, manager.unsubscribe]);\n\n  useIsomorphicEffect(() => {\n    setColorSchemeAttribute(manager.get(defaultColorScheme), getRootElement);\n  }, []);\n\n  useEffect(() => {\n    media.current = window.matchMedia('(prefers-color-scheme: dark)');\n    const listener: MediaQueryCallback = (event) => {\n      if (value === 'auto') {\n        setColorSchemeAttribute(event.matches ? 'dark' : 'light', getRootElement);\n      }\n    };\n\n    media.current?.addEventListener('change', listener);\n    return () => media.current?.removeEventListener('change', listener);\n  }, [value]);\n\n  return { colorScheme: value, setColorScheme, clearColorScheme };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-provider-color-scheme.js","sources":["../../../../src/core/MantineProvider/use-mantine-color-scheme/use-provider-color-scheme.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport type { MantineColorSchemeManager } from '../color-scheme-managers';\nimport type { MantineColorScheme } from '../theme.types';\n\nfunction setColorSchemeAttribute(\n  colorScheme: MantineColorScheme,\n  getRootElement: () => HTMLElement | undefined\n) {\n  const computedColorScheme =\n    colorScheme !== 'auto'\n      ? colorScheme\n      : window.matchMedia('(prefers-color-scheme: dark)').matches\n      ? 'dark'\n      : 'light';\n  getRootElement()?.setAttribute('data-mantine-color-scheme', computedColorScheme);\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\ninterface UseProviderColorSchemeOptions {\n  manager: MantineColorSchemeManager;\n  defaultColorScheme: MantineColorScheme;\n  forceColorScheme: 'light' | 'dark' | undefined;\n  getRootElement(): HTMLElement | undefined;\n}\n\nexport function useProviderColorScheme({\n  manager,\n  defaultColorScheme,\n  getRootElement,\n  forceColorScheme,\n}: UseProviderColorSchemeOptions) {\n  const media = useRef<MediaQueryList>();\n  const [value, setValue] = useState(() => manager.get(defaultColorScheme));\n  const colorSchemeValue = forceColorScheme || value;\n\n  const setColorScheme = useCallback(\n    (colorScheme: MantineColorScheme) => {\n      if (!forceColorScheme) {\n        setColorSchemeAttribute(colorScheme, getRootElement);\n        setValue(colorScheme);\n        manager.set(colorScheme);\n      }\n    },\n    [manager.set, colorSchemeValue, forceColorScheme]\n  );\n\n  const clearColorScheme = useCallback(() => {\n    setValue(defaultColorScheme);\n    setColorSchemeAttribute(defaultColorScheme, getRootElement);\n    manager.clear();\n  }, [manager.clear, defaultColorScheme]);\n\n  useEffect(() => {\n    manager.subscribe(setColorScheme);\n    return manager.unsubscribe;\n  }, [manager.subscribe, manager.unsubscribe]);\n\n  useIsomorphicEffect(() => {\n    setColorSchemeAttribute(manager.get(defaultColorScheme), getRootElement);\n  }, []);\n\n  useEffect(() => {\n    if (forceColorScheme) {\n      setColorSchemeAttribute(forceColorScheme, getRootElement);\n      return () => {};\n    }\n\n    media.current = window.matchMedia('(prefers-color-scheme: dark)');\n    const listener: MediaQueryCallback = (event) => {\n      if (value === 'auto') {\n        setColorSchemeAttribute(event.matches ? 'dark' : 'light', getRootElement);\n      }\n    };\n\n    media.current?.addEventListener('change', listener);\n    return () => media.current?.removeEventListener('change', listener);\n  }, [value]);\n\n  return { colorScheme: colorSchemeValue, setColorScheme, clearColorScheme };\n}\n"],"names":[],"mappings":"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"}

package/esm/index.css

@@ -5679,6 +5679,8 @@ fieldset:disabled .m-38aeed47:not([data-inverted]),
     --_separator-height: calc(0.125rem * var(--mantine-scale));
     --_separator-ml: var(--mantine-spacing-md);
     --_separator-mr: var(--mantine-spacing-md);
+    --_separator-mt: 0;
+    --_separator-mb: 0;
   }
 
 .m-2a371ac9[data-orientation='vertical'] {

package/esm/styles/Stepper.css

@@ -1 +1 @@
-.m-cbb4ea7e{--stepper-icon-size-xs:calc(2.125rem*var(--mantine-scale));--stepper-icon-size-sm:calc(2.25rem*var(--mantine-scale));--stepper-icon-size-md:calc(2.625rem*var(--mantine-scale));--stepper-icon-size-lg:calc(3rem*var(--mantine-scale));--stepper-icon-size-xl:calc(3.25rem*var(--mantine-scale))}.m-aaf89d0b{align-items:var(--_steps-align-items,center);display:flex;flex-direction:var(--_steps-direction);flex-wrap:var(--_steps-wrap,nowrap);gap:var(--_steps-gap)}.m-aaf89d0b[data-wrap]{--_steps-wrap:wrap;--_steps-gap:var(--mantine-spacing-md) 0}.m-aaf89d0b[data-orientation=vertical]{--_steps-direction:column}.m-aaf89d0b[data-orientation=vertical][data-icon-position=left]{--_steps-align-items:flex-start}.m-aaf89d0b[data-orientation=vertical][data-icon-position=right]{--_steps-align-items:flex-end}.m-aaf89d0b[data-orientation=horizontal]{--_steps-direction:row}.m-2a371ac9{--_separator-offset:calc(var(--stepper-icon-size)/2 - 0.0625rem*var(--mantine-scale));background-color:var(--_separator-bg);flex:1;height:var(--_separator-height);margin:var(--_separator-mt) var(--_separator-mr) var(--_separator-mb) var(--_separator-ml);transition:background-color .15s ease;width:var(--_separator-width)}[data-mantine-color-scheme=light] .m-2a371ac9{--_separator-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-2a371ac9{--_separator-bg:var(--mantine-color-dark-2)}.m-2a371ac9[data-active]{--_separator-bg:var(--stepper-color)}.m-2a371ac9[data-orientation=horizontal]{--_separator-height:calc(0.125rem*var(--mantine-scale));--_separator-ml:var(--mantine-spacing-md);--_separator-mr:var(--mantine-spacing-md)}.m-2a371ac9[data-orientation=vertical]{--_separator-width:calc(0.125rem*var(--mantine-scale));--_separator-mt:calc(var(--mantine-spacing-xs)/2);--_separator-mb:calc(var(--mantine-spacing-xs) - 0.125rem*var(--mantine-scale))}.m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-2a371ac9[data-orientation=vertical][data-icon-position=right],[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:0;--_separator-mr:var(--_separator-offset)}[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=right]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-78da155d{padding-top:var(--stepper-content-padding)}.m-cbb57068{--_step-color:var(--step-color,var(--stepper-color));cursor:var(--_step-cursor,default);display:flex;flex-direction:var(--_step-direction)}.m-cbb57068[data-allow-click]{--_step-cursor:pointer}.m-cbb57068[data-icon-position=left]{--_step-direction:row}.m-cbb57068[data-icon-position=right]{--_step-direction:row-reverse}.m-f56b1e2c{align-items:center;flex-direction:var(--_step-direction)}.m-833edb7e{--_separator-spacing:calc(var(--mantine-spacing-xs)/2);justify-content:flex-start;margin-top:var(--_step-mt,var(--_separator-spacing));min-height:calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--_separator-spacing));overflow:hidden}.m-833edb7e:first-of-type{--_step-mt:0}.m-833edb7e:last-of-type .m-6496b3f3{display:none}.m-818e70b{position:relative}.m-6496b3f3{border-left:calc(.125rem*var(--mantine-scale)) solid var(--_separator-border-color);height:100vh;left:calc(var(--stepper-icon-size)/2);position:absolute;top:calc(var(--stepper-icon-size) + var(--_separator-spacing))}[data-mantine-color-scheme=light] .m-6496b3f3{--_separator-border-color:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-6496b3f3{--_separator-border-color:var(--mantine-color-dark-5)}[data-mantine-color-scheme] .m-6496b3f3[data-active]{--_separator-border-color:var(--stepper-color)}.m-1959ad01{align-items:center;background-color:var(--_step-icon-bg);border:calc(.125rem*var(--mantine-scale)) solid var(--_step-icon-border-color);border-radius:var(--stepper-radius);color:var(--_step-icon-color);display:flex;font-size:var(--stepper-fz);font-weight:700;height:var(--stepper-icon-size);justify-content:center;min-height:var(--stepper-icon-size);min-width:var(--stepper-icon-size);position:relative;transition:background-color .15s ease,border-color .15s ease;width:var(--stepper-icon-size)}[data-mantine-color-scheme=light] .m-1959ad01{--_step-icon-bg:var(--mantine-color-gray-1);--_step-icon-border-color:var(--mantine-color-gray-1);--_step-icon-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-1959ad01{--_step-icon-bg:var(--mantine-color-dark-5);--_step-icon-border-color:var(--mantine-color-dark-5);--_step-icon-color:var(--mantine-color-dark-1)}[data-mantine-color-scheme] .m-1959ad01[data-progress]{--_step-icon-border-color:var(--_step-color)}[data-mantine-color-scheme] .m-1959ad01[data-completed]{--_step-icon-color:var(--mantine-color-white);--_step-icon-bg:var(--_step-color);--_step-icon-border-color:var(--_step-color)}.m-a79331dc{align-items:center;color:var(--mantine-color-white);display:flex;inset:0;justify-content:center;position:absolute}.m-1956aa2a{display:flex;flex-direction:column;margin-left:var(--_step-body-ml);margin-right:var(--_step-body-mr);margin-top:var(--_step-body-mt);text-align:var(--_step-body-ta)}.m-1956aa2a[data-icon-position=left]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=left]{--_step-body-ta:right;--_step-body-ml:0;--_step-body-mr:var(--mantine-spacing-sm)}.m-1956aa2a[data-icon-position=right]{--_step-body-ta:right;--_step-body-mr:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=right]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm);--_step-body-mr:0}.m-12051f6c{font-size:var(--stepper-fz);font-weight:500;line-height:1}.m-164eea74{color:var(--mantine-color-dimmed);font-size:calc(var(--stepper-fz) - .125rem*var(--mantine-scale));line-height:1;margin-bottom:calc(var(--stepper-spacing)/3);margin-top:calc(var(--stepper-spacing)/3)}
+.m-cbb4ea7e{--stepper-icon-size-xs:calc(2.125rem*var(--mantine-scale));--stepper-icon-size-sm:calc(2.25rem*var(--mantine-scale));--stepper-icon-size-md:calc(2.625rem*var(--mantine-scale));--stepper-icon-size-lg:calc(3rem*var(--mantine-scale));--stepper-icon-size-xl:calc(3.25rem*var(--mantine-scale))}.m-aaf89d0b{align-items:var(--_steps-align-items,center);display:flex;flex-direction:var(--_steps-direction);flex-wrap:var(--_steps-wrap,nowrap);gap:var(--_steps-gap)}.m-aaf89d0b[data-wrap]{--_steps-wrap:wrap;--_steps-gap:var(--mantine-spacing-md) 0}.m-aaf89d0b[data-orientation=vertical]{--_steps-direction:column}.m-aaf89d0b[data-orientation=vertical][data-icon-position=left]{--_steps-align-items:flex-start}.m-aaf89d0b[data-orientation=vertical][data-icon-position=right]{--_steps-align-items:flex-end}.m-aaf89d0b[data-orientation=horizontal]{--_steps-direction:row}.m-2a371ac9{--_separator-offset:calc(var(--stepper-icon-size)/2 - 0.0625rem*var(--mantine-scale));background-color:var(--_separator-bg);flex:1;height:var(--_separator-height);margin:var(--_separator-mt) var(--_separator-mr) var(--_separator-mb) var(--_separator-ml);transition:background-color .15s ease;width:var(--_separator-width)}[data-mantine-color-scheme=light] .m-2a371ac9{--_separator-bg:var(--mantine-color-gray-2)}[data-mantine-color-scheme=dark] .m-2a371ac9{--_separator-bg:var(--mantine-color-dark-2)}.m-2a371ac9[data-active]{--_separator-bg:var(--stepper-color)}.m-2a371ac9[data-orientation=horizontal]{--_separator-height:calc(0.125rem*var(--mantine-scale));--_separator-ml:var(--mantine-spacing-md);--_separator-mr:var(--mantine-spacing-md);--_separator-mt:0;--_separator-mb:0}.m-2a371ac9[data-orientation=vertical]{--_separator-width:calc(0.125rem*var(--mantine-scale));--_separator-mt:calc(var(--mantine-spacing-xs)/2);--_separator-mb:calc(var(--mantine-spacing-xs) - 0.125rem*var(--mantine-scale))}.m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-2a371ac9[data-orientation=vertical][data-icon-position=right],[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=left]{--_separator-ml:0;--_separator-mr:var(--_separator-offset)}[dir=rtl] .m-2a371ac9[data-orientation=vertical][data-icon-position=right]{--_separator-ml:var(--_separator-offset);--_separator-mr:0}.m-78da155d{padding-top:var(--stepper-content-padding)}.m-cbb57068{--_step-color:var(--step-color,var(--stepper-color));cursor:var(--_step-cursor,default);display:flex;flex-direction:var(--_step-direction)}.m-cbb57068[data-allow-click]{--_step-cursor:pointer}.m-cbb57068[data-icon-position=left]{--_step-direction:row}.m-cbb57068[data-icon-position=right]{--_step-direction:row-reverse}.m-f56b1e2c{align-items:center;flex-direction:var(--_step-direction)}.m-833edb7e{--_separator-spacing:calc(var(--mantine-spacing-xs)/2);justify-content:flex-start;margin-top:var(--_step-mt,var(--_separator-spacing));min-height:calc(var(--stepper-icon-size) + var(--mantine-spacing-xl) + var(--_separator-spacing));overflow:hidden}.m-833edb7e:first-of-type{--_step-mt:0}.m-833edb7e:last-of-type .m-6496b3f3{display:none}.m-818e70b{position:relative}.m-6496b3f3{border-left:calc(.125rem*var(--mantine-scale)) solid var(--_separator-border-color);height:100vh;left:calc(var(--stepper-icon-size)/2);position:absolute;top:calc(var(--stepper-icon-size) + var(--_separator-spacing))}[data-mantine-color-scheme=light] .m-6496b3f3{--_separator-border-color:var(--mantine-color-gray-1)}[data-mantine-color-scheme=dark] .m-6496b3f3{--_separator-border-color:var(--mantine-color-dark-5)}[data-mantine-color-scheme] .m-6496b3f3[data-active]{--_separator-border-color:var(--stepper-color)}.m-1959ad01{align-items:center;background-color:var(--_step-icon-bg);border:calc(.125rem*var(--mantine-scale)) solid var(--_step-icon-border-color);border-radius:var(--stepper-radius);color:var(--_step-icon-color);display:flex;font-size:var(--stepper-fz);font-weight:700;height:var(--stepper-icon-size);justify-content:center;min-height:var(--stepper-icon-size);min-width:var(--stepper-icon-size);position:relative;transition:background-color .15s ease,border-color .15s ease;width:var(--stepper-icon-size)}[data-mantine-color-scheme=light] .m-1959ad01{--_step-icon-bg:var(--mantine-color-gray-1);--_step-icon-border-color:var(--mantine-color-gray-1);--_step-icon-color:var(--mantine-color-gray-7)}[data-mantine-color-scheme=dark] .m-1959ad01{--_step-icon-bg:var(--mantine-color-dark-5);--_step-icon-border-color:var(--mantine-color-dark-5);--_step-icon-color:var(--mantine-color-dark-1)}[data-mantine-color-scheme] .m-1959ad01[data-progress]{--_step-icon-border-color:var(--_step-color)}[data-mantine-color-scheme] .m-1959ad01[data-completed]{--_step-icon-color:var(--mantine-color-white);--_step-icon-bg:var(--_step-color);--_step-icon-border-color:var(--_step-color)}.m-a79331dc{align-items:center;color:var(--mantine-color-white);display:flex;inset:0;justify-content:center;position:absolute}.m-1956aa2a{display:flex;flex-direction:column;margin-left:var(--_step-body-ml);margin-right:var(--_step-body-mr);margin-top:var(--_step-body-mt);text-align:var(--_step-body-ta)}.m-1956aa2a[data-icon-position=left]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=left]{--_step-body-ta:right;--_step-body-ml:0;--_step-body-mr:var(--mantine-spacing-sm)}.m-1956aa2a[data-icon-position=right]{--_step-body-ta:right;--_step-body-mr:var(--mantine-spacing-sm)}[dir=rtl] .m-1956aa2a[data-icon-position=right]{--_step-body-ta:left;--_step-body-ml:var(--mantine-spacing-sm);--_step-body-mr:0}.m-12051f6c{font-size:var(--stepper-fz);font-weight:500;line-height:1}.m-164eea74{color:var(--mantine-color-dimmed);font-size:calc(var(--stepper-fz) - .125rem*var(--mantine-scale));line-height:1;margin-bottom:calc(var(--stepper-spacing)/3);margin-top:calc(var(--stepper-spacing)/3)}

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

@@ -17,8 +17,8 @@ export interface CheckboxProps extends BoxProps, StylesApiProps<CheckboxFactory>
     size?: MantineSize | (string & {});
     /** Key of `theme.radius` or any valid CSS value to set `border-radius,` `theme.defaultRadius` by default */
     radius?: MantineRadius | (string & {}) | number;
-    /** Props passed down to wrapper element */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    /** Props passed down to the root element */
+    wrapperProps?: Record<string, any>;
     /** Position of the label relative to the input, `'right'` by default */
     labelPosition?: 'left' | 'right';
     /** Description displayed below the label */

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

@@ -12,7 +12,7 @@ export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'onChange'>
     /** Called when value changes */
     onChange?(value: string[]): void;
     /** Props passed down to the `Input.Wrapper` */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    wrapperProps?: Record<string, any>;
     /** Controls size of the `Input.Wrapper`, `'sm'` by default */
     size?: MantineSize | (string & {});
 }

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

@@ -9,6 +9,7 @@ export interface ComboboxContextValue {
     onOptionSubmit?(value: string, optionProps: ComboboxOptionProps): void;
     size: MantineSize | (string & {});
     resetSelectionOnOptionHover: boolean | undefined;
+    readOnly: boolean | undefined;
 }
 export declare const ComboboxProvider: ({ children, value }: {
     value: ComboboxContextValue;

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

@@ -33,6 +33,8 @@ export interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFa
     dropdownPadding?: React.CSSProperties['padding'];
     /** Determines whether selection should be reset when option is hovered, `false` by default */
     resetSelectionOnOptionHover?: boolean;
+    /** Determines whether Combobox value can be changed */
+    readOnly?: boolean;
 }
 export type ComboboxFactory = Factory<{
     props: ComboboxProps;

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

@@ -1,6 +1,9 @@
 import type { GridColProps } from './GridCol';
-interface GridColVariablesProps extends GridColProps {
+interface GridColVariablesProps {
     selector: string;
+    span: GridColProps['span'] | undefined;
+    order?: GridColProps['order'] | undefined;
+    offset?: GridColProps['offset'] | undefined;
 }
 export declare function GridColVariables({ span, order, offset, selector }: GridColVariablesProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -35,7 +35,7 @@ export interface __InputProps {
     /** Sets `pointer-events` styles on the `rightSection` element, `'none'` by default */
     rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];
     /** Props added to the root element of the `Input` component */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    wrapperProps?: Record<string, any>;
     /** Sets `required` attribute on the `input` element */
     required?: boolean;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default */

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import { BoxProps, StylesApiProps } from '../../core';
 import { __BaseInputProps } from './Input';
 interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
@@ -10,285 +9,17 @@ 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" | "className" | "style" | "label" | "variant" | "styles" | "id" | "unstyled" | "classNames" | "vars" | "required" | "error" | "description" | "__staticSelector" | "__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]>; }, "label" | "style" | "className" | "id" | "size" | "styles" | "vars" | "variant" | "classNames" | "unstyled" | "error" | "description" | "required" | "__staticSelector" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
     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;
     wrapperProps: {
-        color?: string | undefined;
-        className: string | undefined;
-        style: import("../../core").MantineStyleProp;
-        slot?: string | undefined;
-        title?: string | undefined;
-        children?: import("react").ReactNode;
-        key?: import("react").Key | null | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        autoFocus?: boolean | undefined;
-        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
-        contextMenu?: string | undefined;
-        dir?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        nonce?: string | undefined;
-        placeholder?: string | 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;
-        property?: string | undefined;
-        rel?: string | undefined;
-        resource?: string | undefined;
-        rev?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-        is?: string | undefined;
-        'aria-activedescendant'?: string | 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 | "true" | "false") | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
-        'aria-colcount'?: number | undefined;
-        'aria-colindex'?: number | undefined;
-        'aria-colindextext'?: string | undefined;
-        'aria-colspan'?: number | undefined;
-        'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
-        'aria-describedby'?: string | undefined;
-        'aria-description'?: string | undefined;
-        'aria-details'?: string | undefined;
-        'aria-disabled'?: (boolean | "true" | "false") | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
-        'aria-errormessage'?: string | undefined;
-        'aria-expanded'?: (boolean | "true" | "false") | undefined;
-        'aria-flowto'?: string | undefined;
-        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree" | undefined;
-        'aria-hidden'?: (boolean | "true" | "false") | undefined;
-        'aria-invalid'?: boolean | "true" | "false" | "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 | "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 | "true" | "false" | "mixed" | undefined;
-        'aria-readonly'?: (boolean | "true" | "false") | undefined;
-        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | 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 | "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;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined;
-        onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-        onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-        onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-        onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-        onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-        onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
-        onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
-        onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-        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;
-        onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
-        onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
-        onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-        onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-        onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
-        onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-        onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-        onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
-        onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-        onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
-        onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
-        onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         label: import("react").ReactNode;
         description: import("react").ReactNode;
         error: import("react").ReactNode;
         required: boolean | undefined;
         classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
+        className: string | undefined;
         __staticSelector: string | undefined;
         __stylesApiProps: Record<string, any>;
         errorProps: Record<string, any> | undefined;
@@ -296,7 +27,8 @@ 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;
         withAsterisk: boolean | undefined;
@@ -307,7 +39,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

@@ -4,7 +4,7 @@ import { __InputStylesNames, __BaseInputProps, InputVariant } from '../Input';
 export interface InputBaseProps extends BoxProps, __BaseInputProps, StylesApiProps<InputBaseFactory> {
     __staticSelector?: string;
     __stylesApiProps?: Record<string, any>;
-    /** Props passed to the root element (`Input.Wrapper` component) */
+    /** Props passed down to the root element (`Input.Wrapper` component) */
     wrapperProps?: Record<string, any>;
     /** Determines whether the input can have multiple lines, for example when `component="textarea"`, `false` by default */
     multiline?: boolean;

package/lib/components/JsonInput/JsonInput.d.ts

@@ -20,11 +20,11 @@ export interface JsonInputProps extends Omit<TextareaProps, 'onChange'> {
 }
 export type JsonInputFactory = Factory<{
     props: JsonInputProps;
-    ref: HTMLInputElement;
+    ref: HTMLTextAreaElement;
     stylesNames: __InputStylesNames;
 }>;
 export declare const JsonInput: import("../../core").MantineComponent<{
     props: JsonInputProps;
-    ref: HTMLInputElement;
+    ref: HTMLTextAreaElement;
     stylesNames: __InputStylesNames;
 }>;

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

@@ -42,6 +42,16 @@ export interface MenuProps extends __PopoverProps, StylesApiProps<MenuFactory> {
 }
 export declare function Menu(_props: MenuProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Menu {
+    var extend: (input: import("../../core/factory/factory").ExtendsRootComponent<{
+        props: MenuProps;
+        ref: HTMLDivElement;
+        stylesNames: MenuStylesNames;
+    }>) => import("../../core/factory/factory").ExtendsRootComponent<{
+        props: MenuProps;
+        ref: HTMLDivElement;
+        stylesNames: MenuStylesNames;
+    }>;
+    var classes: Record<string, string>;
     var displayName: string;
     var Item: (<C = "button">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, import("./MenuItem/MenuItem").MenuItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(import("./MenuItem/MenuItem").MenuItemProps & {
         component?: any;

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

@@ -48,7 +48,7 @@ export type NavLinkFactory = PolymorphicFactory<{
 }>;
 export declare const NavLink: (<C = "a">(props: import("../../core/factory/create-polymorphic-component").PolymorphicComponentProps<C, NavLinkProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & Omit<React.FunctionComponent<(NavLinkProps & {
     component?: any;
-} & Omit<Omit<any, "ref">, keyof NavLinkProps | "component"> & {
+} & Omit<Omit<any, "ref">, "component" | keyof NavLinkProps> & {
     ref?: any;
 }) | (NavLinkProps & {
     component: React.ElementType<any>;

package/lib/components/PasswordInput/PasswordInput.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { StylesApiProps, ElementProps, Factory } from '../../core';
 import { InputBaseProps } from '../InputBase';
-import { InputVariant } from '../Input';
-export type PasswordInputStylesNames = 'root' | 'visibilityToggle' | 'innerInput';
+import { InputVariant, __InputStylesNames } from '../Input';
+export type PasswordInputStylesNames = 'root' | 'visibilityToggle' | 'innerInput' | __InputStylesNames;
 export type PasswordInputCssVariables = {
     root: '--psi-icon-size' | '--psi-button-size';
 };

package/lib/components/Radio/Radio.d.ts

@@ -17,7 +17,7 @@ export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, Elem
     /** Custom checked icon component, by default a circle is displayed in checked state */
     icon?: React.FC<RadioIconProps>;
     /** Props passed down to the root element */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    wrapperProps?: Record<string, any>;
     /** Position of the label relative to the input, `'right'` by default */
     labelPosition?: 'left' | 'right';
     /** Description displayed below the label */

package/lib/components/Radio/RadioGroup/RadioGroup.d.ts

@@ -12,7 +12,7 @@ export interface RadioGroupProps extends Omit<InputWrapperProps, 'onChange'> {
     /** Called when value changes */
     onChange?(value: string): void;
     /** Props passed down to the `Input.Wrapper` */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    wrapperProps?: Record<string, any>;
     /** Controls size of the `Input.Wrapper`, `'sm'` by default */
     size?: MantineSize;
     /** Name attribute of child radio inputs */

package/lib/components/Switch/Switch.d.ts

@@ -22,7 +22,7 @@ export interface SwitchProps extends BoxProps, StylesApiProps<SwitchFactory>, El
     /** Key of `theme.radius` or any valid CSS value to set `border-radius,` "xl" by default */
     radius?: MantineRadius | (string & {}) | number;
     /** Props passed down to the wrapper element */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    wrapperProps?: Record<string, any>;
     /** Icon inside the thumb of switch */
     thumbIcon?: React.ReactNode;
     /** Position of the label relative to the input, `'right'` by default */

package/lib/components/Switch/SwitchGroup/SwitchGroup.d.ts

@@ -12,7 +12,7 @@ export interface SwitchGroupProps extends Omit<InputWrapperProps, 'onChange'> {
     /** Called when value changes */
     onChange?(value: string[]): void;
     /** Props passed down to the `Input.Wrapper` */
-    wrapperProps?: React.ComponentPropsWithoutRef<'div'>;
+    wrapperProps?: Record<string, any>;
     /** Controls size of the `Input.Wrapper`, `'sm'` by default */
     size?: MantineSize | (string & {});
 }

package/lib/components/Textarea/Textarea.d.ts

@@ -11,11 +11,11 @@ export interface TextareaProps extends InputBaseProps, ElementProps<'textarea',
 }
 export type TextareaFactory = Factory<{
     props: TextareaProps;
-    ref: HTMLInputElement;
+    ref: HTMLTextAreaElement;
     stylesNames: __InputStylesNames;
 }>;
 export declare const Textarea: import("../../core").MantineComponent<{
     props: TextareaProps;
-    ref: HTMLInputElement;
+    ref: HTMLTextAreaElement;
     stylesNames: __InputStylesNames;
 }>;

package/lib/core/MantineProvider/ColorSchemeScript/ColorSchemeScript.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { MantineColorScheme } from '../theme.types';
 export interface ColorSchemeScriptProps extends React.ComponentPropsWithoutRef<'script'> {
+    forceColorScheme?: 'light' | 'dark';
     defaultColorScheme?: MantineColorScheme;
     localStorageKey?: string;
 }
-export declare function ColorSchemeScript({ defaultColorScheme, localStorageKey, ...others }: ColorSchemeScriptProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorSchemeScript({ defaultColorScheme, localStorageKey, forceColorScheme, ...others }: ColorSchemeScriptProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,8 +8,10 @@ export interface MantineProviderProps {
     theme?: MantineThemeOverride;
     /** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */
     colorSchemeManager?: MantineColorSchemeManager;
-    /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `auto` by default */
+    /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `light` by default */
     defaultColorScheme?: MantineColorScheme;
+    /** Forces color scheme value, if set, MantineProvider ignores `colorSchemeManager` and `defaultColorScheme` */
+    forceColorScheme?: 'light' | 'dark';
     /** CSS selector to which CSS variables should be added, `:root` by default */
     cssVariablesSelector?: string;
     /** Determines whether theme CSS variables should be added to given `cssVariablesSelector`, `true` by default */
@@ -25,7 +27,7 @@ export interface MantineProviderProps {
     /** Your application */
     children?: React.ReactNode;
 }
-export declare function MantineProvider({ theme, children, getStyleNonce, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function MantineProvider({ theme, children, getStyleNonce, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MantineProvider {
     var displayName: string;
 }

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): "dark" | "light";
+export declare function useComputedColorScheme(defaultValue: 'light' | 'dark', options?: UseMediaQueryOptions): "light" | "dark";