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

package/esm/core/MantineProvider/MantineProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"MantineProvider.js","sources":["../../../src/core/MantineProvider/MantineProvider.tsx"],"sourcesContent":["import './global.css';\nimport React from 'react';\nimport { suppressNextjsWarning } from './suppress-nextjs-warning';\nimport { MantineCssVariables, CSSVariablesResolver } from './MantineCssVariables';\nimport { MantineThemeProvider } from './MantineThemeProvider';\nimport type { MantineColorScheme, MantineThemeOverride } from './theme.types';\nimport { MantineClasses } from './MantineClasses';\nimport { localStorageColorSchemeManager, MantineColorSchemeManager } from './color-scheme-managers';\nimport { MantineContext } from './Mantine.context';\nimport { useProviderColorScheme } from './use-mantine-color-scheme';\nimport { useRespectReduceMotion } from './use-respect-reduce-motion';\n\nsuppressNextjsWarning();\n\nexport interface MantineProviderProps {\n  /** Theme override object */\n  theme?: MantineThemeOverride;\n\n  /** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */\n  colorSchemeManager?: MantineColorSchemeManager;\n\n  /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `auto` by default */\n  defaultColorScheme?: MantineColorScheme;\n\n  /** CSS selector to which CSS variables should be added, `:root` by default */\n  cssVariablesSelector?: string;\n\n  /** Determines whether theme CSS variables should be added to given `cssVariablesSelector`, `true` by default */\n  withCssVariables?: boolean;\n\n  /** Function to resolve root element to set `data-mantine-color-scheme` attribute, must return undefined on server, `() => document.documentElement` by default */\n  getRootElement?(): HTMLElement | undefined;\n\n  /** A prefix for components static classes (for example {selector}-Text-root), `mantine` by default */\n  classNamesPrefix?: string;\n\n  /** Function to generate nonce attribute added to all generated `<style />` tags */\n  getStyleNonce?(): string;\n\n  /** Function to generate CSS variables based on theme object */\n  cssVariablesResolver?: CSSVariablesResolver;\n\n  /** Your application */\n  children?: React.ReactNode;\n}\n\nexport function MantineProvider({\n  theme,\n  children,\n  getStyleNonce,\n  withCssVariables = true,\n  cssVariablesSelector = ':root',\n  classNamesPrefix = 'mantine',\n  colorSchemeManager = localStorageColorSchemeManager(),\n  defaultColorScheme = 'auto',\n  getRootElement = () => document.documentElement,\n  cssVariablesResolver,\n}: MantineProviderProps) {\n  const { colorScheme, setColorScheme, clearColorScheme } = useProviderColorScheme({\n    defaultColorScheme,\n    manager: colorSchemeManager,\n    getRootElement,\n  });\n\n  useRespectReduceMotion({\n    respectReducedMotion: theme?.respectReducedMotion || false,\n    getRootElement,\n  });\n\n  return (\n    <MantineContext.Provider\n      value={{\n        colorSchemeManager,\n        colorScheme,\n        setColorScheme,\n        clearColorScheme,\n        getRootElement,\n        classNamesPrefix,\n        getStyleNonce,\n        cssVariablesResolver,\n        cssVariablesSelector,\n      }}\n    >\n      <MantineThemeProvider theme={theme}>\n        {withCssVariables && <MantineCssVariables cssVariablesSelector={cssVariablesSelector} />}\n        <MantineClasses />\n        {children}\n      </MantineThemeProvider>\n    </MantineContext.Provider>\n  );\n}\n\nMantineProvider.displayName = '@mantine/core/MantineProvider';\n"],"names":[],"mappings":";;;;;;;;;;AAUA,qBAAqB,EAAE,CAAC;AACjB,SAAS,eAAe,CAAC;AAChC,EAAE,KAAK;AACP,EAAE,QAAQ;AACV,EAAE,aAAa;AACf,EAAE,gBAAgB,GAAG,IAAI;AACzB,EAAE,oBAAoB,GAAG,OAAO;AAChC,EAAE,gBAAgB,GAAG,SAAS;AAC9B,EAAE,kBAAkB,GAAG,8BAA8B,EAAE;AACvD,EAAE,kBAAkB,GAAG,MAAM;AAC7B,EAAE,cAAc,GAAG,MAAM,QAAQ,CAAC,eAAe;AACjD,EAAE,oBAAoB;AACtB,CAAC,EAAE;AACH,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,CAAC;AACnF,IAAI,kBAAkB;AACtB,IAAI,OAAO,EAAE,kBAAkB;AAC/B,IAAI,cAAc;AAClB,GAAG,CAAC,CAAC;AACL,EAAE,sBAAsB,CAAC;AACzB,IAAI,oBAAoB,EAAE,CAAC,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,oBAAoB,KAAK,KAAK;AACxF,IAAI,cAAc;AAClB,GAAG,CAAC,CAAC;AACL,EAAE,uBAAuB,KAAK,CAAC,aAAa;AAC5C,IAAI,cAAc,CAAC,QAAQ;AAC3B,IAAI;AACJ,MAAM,KAAK,EAAE;AACb,QAAQ,kBAAkB;AAC1B,QAAQ,WAAW;AACnB,QAAQ,cAAc;AACtB,QAAQ,gBAAgB;AACxB,QAAQ,cAAc;AACtB,QAAQ,gBAAgB;AACxB,QAAQ,aAAa;AACrB,QAAQ,oBAAoB;AAC5B,QAAQ,oBAAoB;AAC5B,OAAO;AACP,KAAK;AACL,oBAAoB,KAAK,CAAC,aAAa,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAE,EAAE,gBAAgB,oBAAoB,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,EAAE,oBAAoB,EAAE,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;AACrP,GAAG,CAAC;AACJ,CAAC;AACD,eAAe,CAAC,WAAW,GAAG,+BAA+B;;;;"}
+{"version":3,"file":"MantineProvider.js","sources":["../../../src/core/MantineProvider/MantineProvider.tsx"],"sourcesContent":["import './global.css';\nimport React from 'react';\nimport { suppressNextjsWarning } from './suppress-nextjs-warning';\nimport { MantineCssVariables, CSSVariablesResolver } from './MantineCssVariables';\nimport { MantineThemeProvider } from './MantineThemeProvider';\nimport type { MantineColorScheme, MantineThemeOverride } from './theme.types';\nimport { MantineClasses } from './MantineClasses';\nimport { localStorageColorSchemeManager, MantineColorSchemeManager } from './color-scheme-managers';\nimport { MantineContext } from './Mantine.context';\nimport { useProviderColorScheme } from './use-mantine-color-scheme';\nimport { useRespectReduceMotion } from './use-respect-reduce-motion';\n\nsuppressNextjsWarning();\n\nexport interface MantineProviderProps {\n  /** Theme override object */\n  theme?: MantineThemeOverride;\n\n  /** Used to retrieve/set color scheme value in external storage, by default uses `window.localStorage` */\n  colorSchemeManager?: MantineColorSchemeManager;\n\n  /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `auto` by default */\n  defaultColorScheme?: MantineColorScheme;\n\n  /** Forces color scheme value, if set, MantineProvider ignores `colorSchemeManager` and `defaultColorScheme` */\n  forceColorScheme?: 'light' | 'dark';\n\n  /** CSS selector to which CSS variables should be added, `:root` by default */\n  cssVariablesSelector?: string;\n\n  /** Determines whether theme CSS variables should be added to given `cssVariablesSelector`, `true` by default */\n  withCssVariables?: boolean;\n\n  /** Function to resolve root element to set `data-mantine-color-scheme` attribute, must return undefined on server, `() => document.documentElement` by default */\n  getRootElement?(): HTMLElement | undefined;\n\n  /** A prefix for components static classes (for example {selector}-Text-root), `mantine` by default */\n  classNamesPrefix?: string;\n\n  /** Function to generate nonce attribute added to all generated `<style />` tags */\n  getStyleNonce?(): string;\n\n  /** Function to generate CSS variables based on theme object */\n  cssVariablesResolver?: CSSVariablesResolver;\n\n  /** Your application */\n  children?: React.ReactNode;\n}\n\nexport function MantineProvider({\n  theme,\n  children,\n  getStyleNonce,\n  withCssVariables = true,\n  cssVariablesSelector = ':root',\n  classNamesPrefix = 'mantine',\n  colorSchemeManager = localStorageColorSchemeManager(),\n  defaultColorScheme = 'auto',\n  getRootElement = () => document.documentElement,\n  cssVariablesResolver,\n  forceColorScheme,\n}: MantineProviderProps) {\n  const { colorScheme, setColorScheme, clearColorScheme } = useProviderColorScheme({\n    defaultColorScheme,\n    forceColorScheme,\n    manager: colorSchemeManager,\n    getRootElement,\n  });\n\n  useRespectReduceMotion({\n    respectReducedMotion: theme?.respectReducedMotion || false,\n    getRootElement,\n  });\n\n  return (\n    <MantineContext.Provider\n      value={{\n        colorSchemeManager,\n        colorScheme,\n        setColorScheme,\n        clearColorScheme,\n        getRootElement,\n        classNamesPrefix,\n        getStyleNonce,\n        cssVariablesResolver,\n        cssVariablesSelector,\n      }}\n    >\n      <MantineThemeProvider theme={theme}>\n        {withCssVariables && <MantineCssVariables cssVariablesSelector={cssVariablesSelector} />}\n        <MantineClasses />\n        {children}\n      </MantineThemeProvider>\n    </MantineContext.Provider>\n  );\n}\n\nMantineProvider.displayName = '@mantine/core/MantineProvider';\n"],"names":[],"mappings":";;;;;;;;;;AAUA,qBAAqB,EAAE,CAAC;AACjB,SAAS,eAAe,CAAC;AAChC,EAAE,KAAK;AACP,EAAE,QAAQ;AACV,EAAE,aAAa;AACf,EAAE,gBAAgB,GAAG,IAAI;AACzB,EAAE,oBAAoB,GAAG,OAAO;AAChC,EAAE,gBAAgB,GAAG,SAAS;AAC9B,EAAE,kBAAkB,GAAG,8BAA8B,EAAE;AACvD,EAAE,kBAAkB,GAAG,MAAM;AAC7B,EAAE,cAAc,GAAG,MAAM,QAAQ,CAAC,eAAe;AACjD,EAAE,oBAAoB;AACtB,EAAE,gBAAgB;AAClB,CAAC,EAAE;AACH,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,sBAAsB,CAAC;AACnF,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,OAAO,EAAE,kBAAkB;AAC/B,IAAI,cAAc;AAClB,GAAG,CAAC,CAAC;AACL,EAAE,sBAAsB,CAAC;AACzB,IAAI,oBAAoB,EAAE,CAAC,KAAK,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,oBAAoB,KAAK,KAAK;AACxF,IAAI,cAAc;AAClB,GAAG,CAAC,CAAC;AACL,EAAE,uBAAuB,KAAK,CAAC,aAAa;AAC5C,IAAI,cAAc,CAAC,QAAQ;AAC3B,IAAI;AACJ,MAAM,KAAK,EAAE;AACb,QAAQ,kBAAkB;AAC1B,QAAQ,WAAW;AACnB,QAAQ,cAAc;AACtB,QAAQ,gBAAgB;AACxB,QAAQ,cAAc;AACtB,QAAQ,gBAAgB;AACxB,QAAQ,aAAa;AACrB,QAAQ,oBAAoB;AAC5B,QAAQ,oBAAoB;AAC5B,OAAO;AACP,KAAK;AACL,oBAAoB,KAAK,CAAC,aAAa,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAE,EAAE,gBAAgB,oBAAoB,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,EAAE,oBAAoB,EAAE,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;AACrP,GAAG,CAAC;AACJ,CAAC;AACD,eAAe,CAAC,WAAW,GAAG,+BAA+B;;;;"}

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

@@ -1,4 +1,5 @@
-import { useRef, useContext, useEffect } from 'react';
+import { useRef, useContext, useCallback, useEffect } from 'react';
+import { useColorScheme } from '@mantine/hooks';
 import { MantineContext } from '../Mantine.context.js';
 
 function disableTransition() {
@@ -34,6 +35,12 @@ function useMantineColorScheme() {
       (_a = clearStylesRef.current) == null ? void 0 : _a.call(clearStylesRef);
     }, 10);
   };
+  const osColorScheme = useColorScheme("light", { getInitialValueInEffect: false });
+  const computedColorScheme = ctx.colorScheme === "auto" ? osColorScheme : ctx.colorScheme;
+  const toggleColorScheme = useCallback(
+    () => setColorScheme(computedColorScheme === "light" ? "dark" : "light"),
+    [setColorScheme, computedColorScheme]
+  );
   useEffect(
     () => () => {
       var _a;
@@ -45,7 +52,8 @@ function useMantineColorScheme() {
   return {
     colorScheme: ctx.colorScheme,
     setColorScheme,
-    clearColorScheme
+    clearColorScheme,
+    toggleColorScheme
   };
 }
 

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

@@ -1 +1 @@
-{"version":3,"file":"use-mantine-color-scheme.js","sources":["../../../../src/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.ts"],"sourcesContent":["import { useContext, useEffect, useRef } from 'react';\nimport { MantineContext } from '../Mantine.context';\nimport { MantineColorScheme } from '../theme.types';\n\nfunction disableTransition() {\n  const style = document.createElement('style');\n  style.innerHTML = '*, *::before, *::after {transition: none !important;}';\n  style.setAttribute('data-mantine-disable-transition', 'true');\n  document.head.appendChild(style);\n  const clear = () =>\n    document\n      .querySelectorAll('[data-mantine-disable-transition]')\n      .forEach((element) => element.remove());\n  return clear;\n}\n\nexport function useMantineColorScheme() {\n  const clearStylesRef = useRef<() => void>();\n  const timeoutRef = useRef<number>();\n  const ctx = useContext(MantineContext);\n\n  if (!ctx) {\n    throw new Error('[@mantine/core] MantineProvider was not found in tree');\n  }\n\n  const setColorScheme = (value: MantineColorScheme) => {\n    ctx.setColorScheme(value);\n    clearStylesRef.current = disableTransition();\n    window.clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => {\n      clearStylesRef.current?.();\n    }, 10);\n  };\n\n  const clearColorScheme = () => {\n    ctx.clearColorScheme();\n    clearStylesRef.current = disableTransition();\n    window.clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => {\n      clearStylesRef.current?.();\n    }, 10);\n  };\n\n  useEffect(\n    () => () => {\n      clearStylesRef.current?.();\n      window.clearTimeout(timeoutRef.current);\n    },\n    []\n  );\n\n  return {\n    colorScheme: ctx.colorScheme,\n    setColorScheme,\n    clearColorScheme,\n  };\n}\n"],"names":[],"mappings":";;;AAEA,SAAS,iBAAiB,GAAG;AAC7B,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAChD,EAAE,KAAK,CAAC,SAAS,GAAG,uDAAuD,CAAC;AAC5E,EAAE,KAAK,CAAC,YAAY,CAAC,iCAAiC,EAAE,MAAM,CAAC,CAAC;AAChE,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,gBAAgB,CAAC,mCAAmC,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;AAC5H,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,qBAAqB,GAAG;AACxC,EAAE,MAAM,cAAc,GAAG,MAAM,EAAE,CAAC;AAClC,EAAE,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC;AAC9B,EAAE,MAAM,GAAG,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AACzC,EAAE,IAAI,CAAC,GAAG,EAAE;AACZ,IAAI,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;AAC7E,GAAG;AACH,EAAE,MAAM,cAAc,GAAG,CAAC,KAAK,KAAK;AACpC,IAAI,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC9B,IAAI,cAAc,CAAC,OAAO,GAAG,iBAAiB,EAAE,CAAC;AACjD,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC5C,IAAI,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM;AACjD,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,CAAC,EAAE,GAAG,cAAc,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAC/E,KAAK,EAAE,EAAE,CAAC,CAAC;AACX,GAAG,CAAC;AACJ,EAAE,MAAM,gBAAgB,GAAG,MAAM;AACjC,IAAI,GAAG,CAAC,gBAAgB,EAAE,CAAC;AAC3B,IAAI,cAAc,CAAC,OAAO,GAAG,iBAAiB,EAAE,CAAC;AACjD,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC5C,IAAI,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM;AACjD,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,CAAC,EAAE,GAAG,cAAc,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAC/E,KAAK,EAAE,EAAE,CAAC,CAAC;AACX,GAAG,CAAC;AACJ,EAAE,SAAS;AACX,IAAI,MAAM,MAAM;AAChB,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,CAAC,EAAE,GAAG,cAAc,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAC/E,MAAM,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC9C,KAAK;AACL,IAAI,EAAE;AACN,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,WAAW,EAAE,GAAG,CAAC,WAAW;AAChC,IAAI,cAAc;AAClB,IAAI,gBAAgB;AACpB,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-mantine-color-scheme.js","sources":["../../../../src/core/MantineProvider/use-mantine-color-scheme/use-mantine-color-scheme.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useRef } from 'react';\nimport { useColorScheme } from '@mantine/hooks';\nimport { MantineContext } from '../Mantine.context';\nimport { MantineColorScheme } from '../theme.types';\n\nfunction disableTransition() {\n  const style = document.createElement('style');\n  style.innerHTML = '*, *::before, *::after {transition: none !important;}';\n  style.setAttribute('data-mantine-disable-transition', 'true');\n  document.head.appendChild(style);\n  const clear = () =>\n    document\n      .querySelectorAll('[data-mantine-disable-transition]')\n      .forEach((element) => element.remove());\n  return clear;\n}\n\nexport function useMantineColorScheme() {\n  const clearStylesRef = useRef<() => void>();\n  const timeoutRef = useRef<number>();\n  const ctx = useContext(MantineContext);\n\n  if (!ctx) {\n    throw new Error('[@mantine/core] MantineProvider was not found in tree');\n  }\n\n  const setColorScheme = (value: MantineColorScheme) => {\n    ctx.setColorScheme(value);\n    clearStylesRef.current = disableTransition();\n    window.clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => {\n      clearStylesRef.current?.();\n    }, 10);\n  };\n\n  const clearColorScheme = () => {\n    ctx.clearColorScheme();\n    clearStylesRef.current = disableTransition();\n    window.clearTimeout(timeoutRef.current);\n    timeoutRef.current = window.setTimeout(() => {\n      clearStylesRef.current?.();\n    }, 10);\n  };\n\n  const osColorScheme = useColorScheme('light', { getInitialValueInEffect: false });\n  const computedColorScheme = ctx.colorScheme === 'auto' ? osColorScheme : ctx.colorScheme;\n\n  const toggleColorScheme = useCallback(\n    () => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light'),\n    [setColorScheme, computedColorScheme]\n  );\n\n  useEffect(\n    () => () => {\n      clearStylesRef.current?.();\n      window.clearTimeout(timeoutRef.current);\n    },\n    []\n  );\n\n  return {\n    colorScheme: ctx.colorScheme,\n    setColorScheme,\n    clearColorScheme,\n    toggleColorScheme,\n  };\n}\n"],"names":[],"mappings":";;;;AAGA,SAAS,iBAAiB,GAAG;AAC7B,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAChD,EAAE,KAAK,CAAC,SAAS,GAAG,uDAAuD,CAAC;AAC5E,EAAE,KAAK,CAAC,YAAY,CAAC,iCAAiC,EAAE,MAAM,CAAC,CAAC;AAChE,EAAE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,EAAE,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,gBAAgB,CAAC,mCAAmC,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;AAC5H,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,qBAAqB,GAAG;AACxC,EAAE,MAAM,cAAc,GAAG,MAAM,EAAE,CAAC;AAClC,EAAE,MAAM,UAAU,GAAG,MAAM,EAAE,CAAC;AAC9B,EAAE,MAAM,GAAG,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AACzC,EAAE,IAAI,CAAC,GAAG,EAAE;AACZ,IAAI,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;AAC7E,GAAG;AACH,EAAE,MAAM,cAAc,GAAG,CAAC,KAAK,KAAK;AACpC,IAAI,GAAG,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC9B,IAAI,cAAc,CAAC,OAAO,GAAG,iBAAiB,EAAE,CAAC;AACjD,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC5C,IAAI,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM;AACjD,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,CAAC,EAAE,GAAG,cAAc,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAC/E,KAAK,EAAE,EAAE,CAAC,CAAC;AACX,GAAG,CAAC;AACJ,EAAE,MAAM,gBAAgB,GAAG,MAAM;AACjC,IAAI,GAAG,CAAC,gBAAgB,EAAE,CAAC;AAC3B,IAAI,cAAc,CAAC,OAAO,GAAG,iBAAiB,EAAE,CAAC;AACjD,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC5C,IAAI,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM;AACjD,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,CAAC,EAAE,GAAG,cAAc,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAC/E,KAAK,EAAE,EAAE,CAAC,CAAC;AACX,GAAG,CAAC;AACJ,EAAE,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,EAAE,EAAE,uBAAuB,EAAE,KAAK,EAAE,CAAC,CAAC;AACpF,EAAE,MAAM,mBAAmB,GAAG,GAAG,CAAC,WAAW,KAAK,MAAM,GAAG,aAAa,GAAG,GAAG,CAAC,WAAW,CAAC;AAC3F,EAAE,MAAM,iBAAiB,GAAG,WAAW;AACvC,IAAI,MAAM,cAAc,CAAC,mBAAmB,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5E,IAAI,CAAC,cAAc,EAAE,mBAAmB,CAAC;AACzC,GAAG,CAAC;AACJ,EAAE,SAAS;AACX,IAAI,MAAM,MAAM;AAChB,MAAM,IAAI,EAAE,CAAC;AACb,MAAM,CAAC,EAAE,GAAG,cAAc,CAAC,OAAO,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AAC/E,MAAM,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;AAC9C,KAAK;AACL,IAAI,EAAE;AACN,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,WAAW,EAAE,GAAG,CAAC,WAAW;AAChC,IAAI,cAAc;AAClB,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;AACrB,GAAG,CAAC;AACJ;;;;"}

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

@@ -9,17 +9,21 @@ function setColorSchemeAttribute(colorScheme, getRootElement) {
 function useProviderColorScheme({
   manager,
   defaultColorScheme,
-  getRootElement
+  getRootElement,
+  forceColorScheme
 }) {
   const media = useRef();
   const [value, setValue] = useState(() => manager.get(defaultColorScheme));
+  const colorSchemeValue = forceColorScheme || value;
   const setColorScheme = useCallback(
     (colorScheme) => {
-      setValue(colorScheme);
-      setColorSchemeAttribute(colorScheme, getRootElement);
-      manager.set(colorScheme);
+      if (!forceColorScheme) {
+        setColorSchemeAttribute(colorScheme, getRootElement);
+        setValue(colorScheme);
+        manager.set(colorScheme);
+      }
     },
-    [manager.set, value]
+    [manager.set, colorSchemeValue, forceColorScheme]
   );
   const clearColorScheme = useCallback(() => {
     setValue(defaultColorScheme);
@@ -35,6 +39,11 @@ function useProviderColorScheme({
   }, []);
   useEffect(() => {
     var _a;
+    if (forceColorScheme) {
+      setColorSchemeAttribute(forceColorScheme, getRootElement);
+      return () => {
+      };
+    }
     media.current = window.matchMedia("(prefers-color-scheme: dark)");
     const listener = (event) => {
       if (value === "auto") {
@@ -47,7 +56,7 @@ function useProviderColorScheme({
       return (_a2 = media.current) == null ? void 0 : _a2.removeEventListener("change", listener);
     };
   }, [value]);
-  return { colorScheme: value, setColorScheme, clearColorScheme };
+  return { colorScheme: colorSchemeValue, setColorScheme, clearColorScheme };
 }
 
 export { useProviderColorScheme };

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/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/use-input-props.d.ts

@@ -10,17 +10,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" | "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]>; }, "style" | "label" | "variant" | "id" | "unstyled" | "classNames" | "styles" | "vars" | "className" | "__staticSelector" | "required" | "description" | "error" | "size" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps" | "__stylesApiProps"> & {
     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;
+        dir?: string | undefined;
+        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+        id?: string | undefined;
         key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -28,12 +29,11 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
         autoFocus?: boolean | undefined;
+        className: string | 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;
@@ -56,6 +56,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
+        color?: string | undefined;
         itemProp?: string | undefined;
         itemScope?: boolean | undefined;
         itemType?: string | undefined;
@@ -68,7 +69,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         is?: string | undefined;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "true" | "false") | undefined;
-        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
+        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
         'aria-braillelabel'?: string | undefined;
         'aria-brailleroledescription'?: string | undefined;
         'aria-busy'?: (boolean | "true" | "false") | undefined;
@@ -78,7 +79,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         'aria-colindextext'?: string | undefined;
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+        'aria-current'?: boolean | "time" | "true" | "step" | "false" | "page" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-description'?: string | undefined;
         'aria-details'?: string | undefined;
@@ -88,7 +89,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         '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-haspopup'?: boolean | "dialog" | "menu" | "true" | "grid" | "false" | "listbox" | "tree" | undefined;
         'aria-hidden'?: (boolean | "true" | "false") | undefined;
         'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
@@ -105,7 +106,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>>
         '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-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
         'aria-required'?: (boolean | "true" | "false") | undefined;
         'aria-roledescription'?: string | undefined;
         'aria-rowcount'?: number | undefined;
@@ -138,7 +139,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;
@@ -296,9 +296,9 @@ 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;
         inputContainer: ((children: import("react").ReactNode) => import("react").ReactNode) | undefined;
-        inputWrapperOrder: ("input" | "label" | "error" | "description")[] | undefined;
+        inputWrapperOrder: ("input" | "label" | "description" | "error")[] | undefined;
         withAsterisk: boolean | undefined;
         variant: string | undefined;
     } & BoxProps;
@@ -307,7 +307,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/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/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

@@ -10,6 +10,8 @@ export interface MantineProviderProps {
     colorSchemeManager?: MantineColorSchemeManager;
     /** Default color scheme value used when `colorSchemeManager` cannot retrieve value from external storage, `auto` 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";

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

@@ -3,4 +3,5 @@ export declare function useMantineColorScheme(): {
     colorScheme: MantineColorScheme;
     setColorScheme: (value: MantineColorScheme) => void;
     clearColorScheme: () => void;
+    toggleColorScheme: () => void;
 };

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

@@ -3,9 +3,10 @@ import type { MantineColorScheme } from '../theme.types';
 interface UseProviderColorSchemeOptions {
     manager: MantineColorSchemeManager;
     defaultColorScheme: MantineColorScheme;
+    forceColorScheme: 'light' | 'dark' | undefined;
     getRootElement(): HTMLElement | undefined;
 }
-export declare function useProviderColorScheme({ manager, defaultColorScheme, getRootElement, }: UseProviderColorSchemeOptions): {
+export declare function useProviderColorScheme({ manager, defaultColorScheme, getRootElement, forceColorScheme, }: UseProviderColorSchemeOptions): {
     colorScheme: MantineColorScheme;
     setColorScheme: (colorScheme: MantineColorScheme) => void;
     clearColorScheme: () => void;

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@mantine/core",
   "description": "React components library focused on usability, accessibility and developer experience",
-  "version": "7.0.0-beta.0",
+  "version": "7.0.0-beta.1",
   "types": "./lib/index.d.ts",
+  "module": "./esm/index.js",
   "exports": {
     ".": {
       "import": "./esm/index.js",
@@ -35,7 +36,7 @@
     "design"
   ],
   "peerDependencies": {
-    "@mantine/hooks": "7.0.0-beta.0",
+    "@mantine/hooks": "7.0.0-beta.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },