fix(deps): update all non-major dependencies

[renovate[bot]]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence	Type	Update
@mantine/core (source)	^7.3.2 -> ^7.8.0					dependencies	minor
@mantine/hooks (source)	^7.3.2 -> ^7.8.0					dependencies	minor
@mantine/modals (source)	^7.3.2 -> ^7.8.0					dependencies	minor
@mantine/notifications (source)	^7.3.2 -> ^7.8.0					dependencies	minor
@next/eslint-plugin-next (source)	^14.0.4 -> ^14.2.1					devDependencies	minor
actions/upload-artifact	v4.0.0 -> v4.3.1					action	minor
chart.js (source)	^4.4.1 -> ^4.4.2					dependencies	patch
date-fns	^3.0.6 -> ^3.6.0					dependencies	minor
eslint-config-next (source)	^14.0.4 -> ^14.2.1					devDependencies	minor
eslint-plugin-prettier	^5.1.2 -> ^5.1.3					devDependencies	patch
eslint-plugin-react	^7.33.2 -> ^7.34.1					devDependencies	minor
eslint-plugin-storybook	^0.6.15 -> ^0.8.0					devDependencies	minor
i18next-resources-to-backend	^1.2.0 -> ^1.2.1					dependencies	patch
next (source)	^14.0.4 -> ^14.2.1					dependencies	minor
next-i18n-router	^5.1.0 -> ^5.4.0					dependencies	minor
node	20-alpine -> 20.12.2-alpine					final	minor
prettier (source)	^3.1.1 -> ^3.2.5					devDependencies	minor
prettier-eslint	^16.2.0 -> ^16.3.0					devDependencies	minor
react-cookie (source)	^6.1.1 -> ^6.1.3					dependencies	patch
typescript (source)	^5.3.3 -> ^5.4.5					devDependencies	minor
vitest (source)	^1.1.0 -> ^1.5.0					devDependencies	minor
yup	^1.3.3 -> ^1.4.0					dependencies	minor

---

Release Notes

mantinedev/mantine (@​mantine/core)

### [`v7.8.0`](https://togithub.com/mantinedev/mantine/compare/7.7.2...0f875596f8c8fa62c360d4d578a557fbcb8d1c33) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.7.2...7.8.0) ### [`v7.7.2`](https://togithub.com/mantinedev/mantine/compare/7.7.1...6465389f3cf3961984a4ff27c7081ab423587957) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.7.1...7.7.2) ### [`v7.7.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.7.1) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.7.0...7.7.1) ##### What's Changed - `[@mantine/tiptap]` Improve toolbar items alignment for non-native elements ([#​5993](https://togithub.com/mantinedev/mantine/issues/5993)) - `[@mantine/spotlight]` Fix incorrect down key handling when the spotlight is opened repeatedly ([#​5995](https://togithub.com/mantinedev/mantine/issues/5995)) - `[@mantine/core]` Image: Fix ref not being assigned for fallback images ([#​5989](https://togithub.com/mantinedev/mantine/issues/5989)) - `[@mantine/core]` PinInput: Fix incorrect focus logic ([#​5963](https://togithub.com/mantinedev/mantine/issues/5963)) - `[@mantine/core]` Table: Fix `highlightOnHoverColor` prop not working - `[@mantine/core]` AppShell: Adjust footer position to include env(safe-area-inset-bottom) ([#​5502](https://togithub.com/mantinedev/mantine/issues/5502)) - `[@mantine/core]` PinInput: Fix placeholder not being visible on the element that had focus when the component becomes disabled ([#​5831](https://togithub.com/mantinedev/mantine/issues/5831)) - `[@mantine/dates]` Calendar: Fix double timezone shift ([#​5916](https://togithub.com/mantinedev/mantine/issues/5916)) - `[@mantine/hooks]` use-local-storage: Fix value not being updated when key is changed ([#​5910](https://togithub.com/mantinedev/mantine/issues/5910)) - `[@mantine/charts]` Fix incorrect charts legends height for multiline values ([#​5923](https://togithub.com/mantinedev/mantine/issues/5923)) - `[@mantine/core]` NumberInput: Fix incorrect increment/decrement functions logic when `step` is a float value ([#​5926](https://togithub.com/mantinedev/mantine/issues/5926)) - `[@mantine/core]` Combobox: Fix incorrect IME input handling ([#​5935](https://togithub.com/mantinedev/mantine/issues/5935)) - `[@mantine/core]` Menu: Fix unexpected focus styles in the dropdown element in Firefox ([#​5957](https://togithub.com/mantinedev/mantine/issues/5957)) - `[@mantine/core]` Fix incorrect `disabled` prop handling in TagsInput and MultiSelect ([#​5959](https://togithub.com/mantinedev/mantine/issues/5959)) - `[@mantine/core]` Fix `renderOption` not working for grouped items in Combobox-based components ([#​5952](https://togithub.com/mantinedev/mantine/issues/5952)) - `[@mantine/core]` AppShell: Fix error when used inside Suspense ([#​5979](https://togithub.com/mantinedev/mantine/issues/5979)) - `[@mantine/core]` Update CSS selectors hashing algorithm to prevent collisions with other libraries ([#​5968](https://togithub.com/mantinedev/mantine/issues/5968)) - `[@mantine/carousel]` Fix specificity issues of some selectors ([#​5973](https://togithub.com/mantinedev/mantine/issues/5973)) - `[@mantine/core]` AppShell: Fix missing Aside offset in Header and Footer for `layout=alt` ([#​5974](https://togithub.com/mantinedev/mantine/issues/5974)) ##### New Contributors - [@​naughton](https://togithub.com/naughton) made their first contribution in [https://github.com/mantinedev/mantine/pull/5952](https://togithub.com/mantinedev/mantine/pull/5952) - [@​wasamistake](https://togithub.com/wasamistake) made their first contribution in [https://github.com/mantinedev/mantine/pull/5971](https://togithub.com/mantinedev/mantine/pull/5971) - [@​elecdeer](https://togithub.com/elecdeer) made their first contribution in [https://github.com/mantinedev/mantine/pull/5935](https://togithub.com/mantinedev/mantine/pull/5935) - [@​israelins85](https://togithub.com/israelins85) made their first contribution in [https://github.com/mantinedev/mantine/pull/5910](https://togithub.com/mantinedev/mantine/pull/5910) - [@​1g0rrr](https://togithub.com/1g0rrr) made their first contribution in [https://github.com/mantinedev/mantine/pull/5916](https://togithub.com/mantinedev/mantine/pull/5916) - [@​joshua-webdev](https://togithub.com/joshua-webdev) made their first contribution in [https://github.com/mantinedev/mantine/pull/5963](https://togithub.com/mantinedev/mantine/pull/5963) - [@​s-cork](https://togithub.com/s-cork) made their first contribution in [https://github.com/mantinedev/mantine/pull/5989](https://togithub.com/mantinedev/mantine/pull/5989) - [@​xiaohanyu](https://togithub.com/xiaohanyu) made their first contribution in [https://github.com/mantinedev/mantine/pull/5993](https://togithub.com/mantinedev/mantine/pull/5993) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.7.0...7.7.1 ### [`v7.7.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.7.0) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.6.2...7.7.0) [View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-7-0) ##### Virtual colors Virtual color is a special color which values should be different for light and dark color schemes. To define a virtual color, use `virtualColor` function which accepts an object with the following properties as a single argument: - `name` – color name, must be the same as the key in `theme.colors` object - `light` – a key of `theme.colors` object for light color scheme - `dark` – a key of `theme.colors` object for dark color scheme To see the demo in action, switch between light and dark color schemes (`Ctrl + J`): ```tsx import { createTheme, MantineProvider, virtualColor } from '@​mantine/core'; const theme = createTheme({ colors: { primary: virtualColor({ name: 'primary', dark: 'pink', light: 'cyan', }), }, }); function App() { return {/* Your app here */}; } ``` ##### FloatingIndicator component New [FloatingIndicator](https://mantine.dev/core/floating-indicator) component: ```tsx import { useState } from 'react'; import { IconArrowDown, IconArrowDownLeft, IconArrowDownRight, IconArrowLeft, IconArrowRight, IconArrowUp, IconArrowUpLeft, IconArrowUpRight, IconCircle, } from '@​tabler/icons-react'; import { FloatingIndicator, UnstyledButton } from '@​mantine/core'; import classes from './Demo.module.css'; function Demo() { const [rootRef, setRootRef] = useState(null); const [controlsRefs, setControlsRefs] = useState>({}); const [active, setActive] = useState('center'); const setControlRef = (name: string) => (node: HTMLButtonElement) => { controlsRefs[name] = node; setControlsRefs(controlsRefs); }; return (

setActive('up-left')} ref={setControlRef('up-left')} mod={{ active: active === 'up-left' }} > setActive('up')} ref={setControlRef('up')} mod={{ active: active === 'up' }} > setActive('up-right')} ref={setControlRef('up-right')} mod={{ active: active === 'up-right' }} >

setActive('left')} ref={setControlRef('left')} mod={{ active: active === 'left' }} > setActive('center')} ref={setControlRef('center')} mod={{ active: active === 'center' }} > setActive('right')} ref={setControlRef('right')} mod={{ active: active === 'right' }} >

setActive('down-left')} ref={setControlRef('down-left')} mod={{ active: active === 'down-left' }} > setActive('down')} ref={setControlRef('down')} mod={{ active: active === 'down' }} > setActive('down-right')} ref={setControlRef('down-right')} mod={{ active: active === 'down-right' }} >

); } ``` ##### ScatterChart component New [ScatterChart](https://mantine.dev/charts/scatter-chart) component: ```tsx import { useState } from 'react'; import { IconArrowDown, IconArrowDownLeft, IconArrowDownRight, IconArrowLeft, IconArrowRight, IconArrowUp, IconArrowUpLeft, IconArrowUpRight, IconCircle, } from '@​tabler/icons-react'; import { FloatingIndicator, UnstyledButton } from '@​mantine/core'; import classes from './Demo.module.css'; function Demo() { const [rootRef, setRootRef] = useState(null); const [controlsRefs, setControlsRefs] = useState>({}); const [active, setActive] = useState('center'); const setControlRef = (name: string) => (node: HTMLButtonElement) => { controlsRefs[name] = node; setControlsRefs(controlsRefs); }; return (

setActive('up-left')} ref={setControlRef('up-left')} mod={{ active: active === 'up-left' }} > setActive('up')} ref={setControlRef('up')} mod={{ active: active === 'up' }} > setActive('up-right')} ref={setControlRef('up-right')} mod={{ active: active === 'up-right' }} >

setActive('left')} ref={setControlRef('left')} mod={{ active: active === 'left' }} > setActive('center')} ref={setControlRef('center')} mod={{ active: active === 'center' }} > setActive('right')} ref={setControlRef('right')} mod={{ active: active === 'right' }} >

setActive('down-left')} ref={setControlRef('down-left')} mod={{ active: active === 'down-left' }} > setActive('down')} ref={setControlRef('down')} mod={{ active: active === 'down' }} > setActive('down-right')} ref={setControlRef('down-right')} mod={{ active: active === 'down-right' }} >

); } ``` ##### colorsTuple function New `colorsTuple` function can be used to: - Use single color as the same color for all shades - Transform dynamic string arrays to Mantine color tuple (the array should still have 10 values) ```tsx import { colorsTuple, createTheme } from '@​mantine/core'; const theme = createTheme({ colors: { custom: colorsTuple('#FFC0CB'), dynamic: colorsTuple(Array.from({ length: 10 }, (_, index) => '#FFC0CB')), }, }); ``` ##### use-mutation-observer hook New [useMutationObserver](https://mantine.dev/hooks/use-mutation-observer) hook: ```tsx import { useState } from 'react'; import { Kbd, Text } from '@​mantine/core'; import { useMutationObserver } from '@​mantine/hooks'; function Demo() { const [lastMutation, setLastMutation] = useState(''); useMutationObserver( (mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'dir') { mutation.target instanceof HTMLElement && setLastMutation(mutation.target.getAttribute('dir') || ''); } }); }, { attributes: true, attributeFilter: ['dir'], }, () => document.documentElement ); return ( <> Press Ctrl + Shift + L to change direction Direction was changed to: {lastMutation || 'Not changed yet'} ); } ``` ##### use-state-history hook New [useStateHistory](https://mantine.dev/hooks/use-state-history) hook: ```tsx import { Button, Code, Group, Text } from '@​mantine/core'; import { useStateHistory } from '@​mantine/hooks'; function Demo() { const [value, handlers, history] = useStateHistory(1); return ( <> Current value: {value} handlers.set(Math.ceil(Math.random() * 100) + 1)}>Set value handlers.back()}>Back handlers.forward()}>Forward {JSON.stringify(history, null, 2)} ); } ``` ##### Axis labels [AreaChart](https://mantine.dev/charts/area-chart), [BarChart](https://mantine.dev/charts/bar-chart) and [LineChart](https://mantine.dev/charts/line-chart) components now support `xAxisLabel` and `yAxisLabel` props: ```tsx import { AreaChart } from '@​mantine/charts'; import { data } from './data'; function Demo() { return ( ); } ``` ##### Documentation updates - New section has been added to the [responsive guide](https://mantine.dev/styles/responsive#hidden-and-visible-from-as-classes) on how to use `mantine-hidden-from-{x}` and `mantine-visible-from-{x}` classes. - [Remix guide](https://mantine.dev/guides/remix) has been updated to use new Vite bundler - [Jest](https://mantine.dev/guides/jest) and [Vitest](https://mantine.dev/guides/vitest) guides configuration has been updated to include mocks for `window.HTMLElement.prototype.scrollIntoView` - [CSS variables](https://mantine.dev/styles/css-variables) documentation has been updated to include more information about typography and colors variables ##### Help center updates New articles added to the [help center](https://help.mantine.dev): - [Can I use SegmentedControl with empty value?](https://help.mantine.dev/q/segmented-control-no-value) - [Is there a comparison with other libraries?](https://help.mantine.dev/q/other-libs) - [Can I use Mantine with Vue/Svelte/Angular/etc.?](https://help.mantine.dev/q/vue-svelte-angular) - [How can I test Select/MultiSelect components?](https://help.mantine.dev/q/combobox-testing) ##### Other changes - [SegmentedControl](https://mantine.dev/core/segmented-control) indicator positioning logic has been migrated to [FloatingIndicator](https://mantine.dev/core/floating-indicator). It is now more performant and works better when used inside elements with `transform: scale()`. - New [use-mounted](https://mantine.dev/hooks/use-mounted) hook - [Sparkline](https://mantine.dev/charts/sparkline) now supports `connectNulls` and `areaProps` props - [Remix template](https://togithub.com/mantinedev/remix-template) has been updated to use new Vite bundler - [Select](https://mantine.dev/core/select), [MultiSelect](https://mantine.dev/core/multi-select), [Autocomplete](https://mantine.dev/core/autocomplete) and [TagsInput](https://mantine.dev/core/tags-input) components now support `scrollAreaProps` prop to pass props down to the [ScrollArea](https://mantine.dev/core/scroll-area) component in the dropdown - [Transition](https://mantine.dev/core/transition) component now supports 4 new transitions: `fade-up`, `fade-down`, `fade-left`, `fade-right` - Default [Modal](https://mantine.dev/core/modal) transition was changed to `fade-down`. This change resolves issues with [SegmentedControl](https://mantine.dev/core/segmented-control) indicator positioning when used inside modals. - You can now reference headings font sizes and line heights in `fz` and `lh` style props with `h1`, `h2`, `h3`, `h4`, `h5`, `h6` values ### [`v7.6.2`](https://togithub.com/mantinedev/mantine/releases/tag/7.6.2) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.6.1...7.6.2) #### What's Changed - `[@mantine/hooks]` use-resize-observer: Fix types ([#​5847](https://togithub.com/mantinedev/mantine/issues/5847)) - `[@mantine/hooks]` use-local-storage: Fix `undefined` being written to the local storage when `defaultValue` is not defined ([#​5848](https://togithub.com/mantinedev/mantine/issues/5848)) - `[@mantine/core]` NumberInput: Fix `onValueChange` not being called in increment/decrement functions ([#​5856](https://togithub.com/mantinedev/mantine/issues/5856)) - `[@mantine/core]` InputWrapper: Fix `className` specified in `labelProps`, `descriptionProps` and `errorProps` not being passed to the corresponding element ([#​5862](https://togithub.com/mantinedev/mantine/issues/5862)) - `[@mantine/core]` Fix some functions not working correctly with TypeScript 5.4 ([#​5891](https://togithub.com/mantinedev/mantine/issues/5891)) - `[@mantine/form]` Fix `onValuesChange` not using updated function ([#​5901](https://togithub.com/mantinedev/mantine/issues/5901)) - `[@mantine/core]` Popover: Fix incorrect dropdown selectors ([#​5903](https://togithub.com/mantinedev/mantine/issues/5903)) - `[@mantine/core]` Indicator: Fix processing animation in Safari ([#​5908](https://togithub.com/mantinedev/mantine/issues/5908)) - `[@mantine/hooks]` use-headroom: Fix incorrect pinning logic when scrolling up ([#​5793](https://togithub.com/mantinedev/mantine/issues/5793)) - `[@mantine/dropzone]` Add heic images format to default mime types ([#​5867](https://togithub.com/mantinedev/mantine/issues/5867)) - `[@mantine/core]` Transition: Fix transitions resolving instantly in some cases ([#​5873](https://togithub.com/mantinedev/mantine/issues/5873)) - `[@mantine/dropzone]` Add `inputProps` prop support to pass props down to the underlying hidden input element ([#​5880](https://togithub.com/mantinedev/mantine/issues/5880)) - `[@mantine/core]` Timeline: Fix `autoContrast` being passed to the dom node as attribute ([#​5890](https://togithub.com/mantinedev/mantine/issues/5890)) #### New Contributors - [@​AdarshJais](https://togithub.com/AdarshJais) made their first contribution in [https://github.com/mantinedev/mantine/pull/5833](https://togithub.com/mantinedev/mantine/pull/5833) - [@​Zachary-Kaye](https://togithub.com/Zachary-Kaye) made their first contribution in [https://github.com/mantinedev/mantine/pull/5890](https://togithub.com/mantinedev/mantine/pull/5890) - [@​redachl](https://togithub.com/redachl) made their first contribution in [https://github.com/mantinedev/mantine/pull/5867](https://togithub.com/mantinedev/mantine/pull/5867) - [@​timkrins](https://togithub.com/timkrins) made their first contribution in [https://github.com/mantinedev/mantine/pull/5860](https://togithub.com/mantinedev/mantine/pull/5860) - [@​Alimobasheri](https://togithub.com/Alimobasheri) made their first contribution in [https://github.com/mantinedev/mantine/pull/5793](https://togithub.com/mantinedev/mantine/pull/5793) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.6.1...7.6.2 ### [`v7.6.1`](https://togithub.com/mantinedev/mantine/releases/tag/7.6.1) [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.6.0...7.6.1) ##### What's Changed - `[@mantine/core]` Fix incorrect focus ring styles in Button.Group and ActionIcon.Group components ([#​5736](https://togithub.com/mantinedev/mantine/issues/5736)) - `[@mantine/core]` Progress: Fix incorrect border-radius with multiple sections - `[@mantine/dates]` DateTimePicker: Fix `minDate` and `maxDate` not being respected in time input ([#​5819](https://togithub.com/mantinedev/mantine/issues/5819)) - `[@mantine/core]` Switch: Use `role="switch"` for better accessibility ([#​5746](https://togithub.com/mantinedev/mantine/issues/5746)) - `[@mantine/hooks]` use-resize-observer: Fix incorrect ref type ([#​5780](https://togithub.com/mantinedev/mantine/issues/5780)) - `[@mantine/dates]` Fix `popoverProps.onClose` overriding original component value in DatePickerInput and other similar components ([#​4105](https://togithub.com/mantinedev/mantine/issues/4105)) - `[@mantine/core]` Fix incorrect Escape key handling in Modal and Drawer components in some cases ([#​2827](https://togithub.com/mantinedev/mantine/issues/2827)) - `[@mantine/core]` Combobox: Fix incorrect Escape key handling in Modal, Drawer and Popover - `[@mantine/core]` Transition: Fix transition resolving instantly in some cases ([#​3126](https://togithub.com/mantinedev/mantine/issues/3126), [#​5193](https://togithub.com/mantinedev/mantine/issues/5193)) - `[@mantine/core]` Remove loader from the DOM if `loading` prop is not set on ActionIcon and Button components ([#​5795](https://togithub.com/mantinedev/mantine/issues/5795)) - `[@mantine/hooks]` use-local-storage: Fix inconsistent default value persistence if `getInitialValueInEffect` is set ([#​5796](https://togithub.com/mantinedev/mantine/issues/5796)) - `[@mantine/core]` Select: Fix `autoComplete` prop not working ([#​5813](https://togithub.com/mantinedev/mantine/issues/5813)) - `[@mantine/core]` Tabs: Fix incorrect border styles in outline variant - `[@mantine/core]` Checkbox: Fix incorrect `indeterminate` + `disabled` styles for outline variant ([#​5806](https://togithub.com/mantinedev/mantine/issues/5806)) - `[@mantine/core]` SegmentedControl: Fix indicator state not being updated correctly when controlled state changes to a value that is not present in the data array ([#​5689](https://togithub.com/mantinedev/mantine/issues/5689)) - `[@mantine/core]` Fix incorrect label offset with left label position in Checkbox, Switch and Radio components ([#​5823](https://togithub.com/mantinedev/mantine/issues/5823)) - `[@mantine/core]` PinInput: Fix updating controlled value to an empty string working incorrectly - `[@mantine/core]` Menu: Fix incorrect role of dropdown elements ##### New Contributors - [@​gl3nn](https://togithub.com/gl3nn) made their first contribution in [https://github.com/mantinedev/mantine/pull/5689](https://togithub.com/mantinedev/mantine/pull/5689) - [@​ktunador](https://togithub.com/ktunador) made their first contribution in [https://github.com/mantinedev/mantine/pull/5711](https://togithub.com/mantinedev/mantine/pull/5711) - [@​snturk](https://togithub.com/snturk) made their first contribution in [https://github.com/mantinedev/mantine/pull/5819](https://togithub.com/mantinedev/mantine/pull/5819) **Full Changelog**: https://github.com/mantinedev/mantine/compare/7.6.0...7.6.1 ### [`v7.6.0`](https://togithub.com/mantinedev/mantine/releases/tag/7.6.0): 🌟 [Compare Source](https://togithub.com/mantinedev/mantine/compare/7.5.3...7.6.0) [View changelog with demos on mantine.dev website](https://mantine.dev/changelog/7-6-0) ##### Container queries support You can now use [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries) with Mantine components. `rem` and `em` functions from [postcss-preset-mantine](https://mantine.dev/styles/postcss-preset/#remem-functions) are available in container queries staring from `postcss-preset-mantine@1.13.0`. ```scss .root { min-width: rem(200px); max-width: 100%; min-height: rem(120px); container-type: inline-size; overflow: auto; resize: horizontal; } .child { background-color: var(--mantine-color-dimmed); color: var(--mantine-color-white); padding: var(--mantine-spacing-md); @​container (max-width: rem(500px)) { background-color: var(--mantine-color-blue-filled); } @​container (max-width: rem(300px)) { background-color: var(--mantine-color-red-filled); } } ``` ##### RadarChart component New [RadarChart](https://mantine.dev/charts/radar-chart/) component: ```tsx import { RadarChart } from '@​mantine/charts'; import { data } from './data'; function Demo() { return ( ); } ``` ##### FocusTrap.InitialFocus component [FocusTrap.InitialFocus](https://mantine.dev/core/focus-trap) is a new component that adds a visually hidden element which will receive the focus when the focus trap is activated. Once `FocusTrap.InitialFocus` loses focus, it is removed from the tab order. For example, it is useful if you do not want to focus any elements inside the [Modal](https://mantine.dev/core/modal) when it is opened: ```tsx import { Button, FocusTrap, Modal, TextInput } from '@​mantine/core'; import { useDisclosure } from '@​mantine/hooks'; function Demo() { const [opened, { open, close }] = useDisclosure(false); return ( <> Open modal ); } ``` ##### New MantineProvider props [MantineProvider](https://mantine.dev/theming/mantine-provider) now includes more props to control how styles are generated and injected. These props are useful if you use Mantine as a headless library and in test environments. ##### deduplicateCssVariables `deduplicateCssVariables` prop determines whether CSS variables should be deduplicated: if CSS variable has the same value as in default theme, it is not added in the runtime. By default, it is set to `true`. If set to `false`, all Mantine CSS variables will be added in `