@mantine/core 9.6.2 → 9.7.0

package/lib/core/Box/style-props/index.d.ts

@@ -1,5 +1,5 @@
 export * from './style-props.types';
 export { extractStyleProps } from './extract-style-props/extract-style-props';
-export { STYlE_PROPS_DATA } from './style-props-data';
+export { STYLE_PROPS_DATA } from './style-props-data';
 export { parseStyleProps } from './parse-style-props/parse-style-props';
 export type { SystemPropData } from './style-props-data';

package/lib/core/Box/style-props/style-props-data.d.ts

@@ -4,4 +4,4 @@ export interface SystemPropData {
     type: StylePropType;
     property: string | string[];
 }
-export declare const STYlE_PROPS_DATA: Record<keyof MantineStyleProps, SystemPropData>;
+export declare const STYLE_PROPS_DATA: Record<keyof MantineStyleProps, SystemPropData>;

package/lib/core/styles-api/use-styles/use-styles.d.ts

@@ -17,9 +17,10 @@ export interface UseStylesInput<Payload extends FactoryPayload> {
     vars?: PartialVarsResolver<Payload>;
     varsResolver?: VarsResolver<Payload>;
     attributes?: Attributes<Payload>;
+    stable?: boolean;
 }
 export type GetStylesApi<Payload extends FactoryPayload> = (selector: NonNullable<Payload['stylesNames']>, options?: GetStylesApiOptions) => {
     className: string;
     style: CSSProperties;
 };
-export declare function useStyles<Payload extends FactoryPayload>({ name, classes, props, stylesCtx, className, style, rootSelector, unstyled, classNames, styles, vars, varsResolver, attributes, }: UseStylesInput<Payload>): GetStylesApi<Payload>;
+export declare function useStyles<Payload extends FactoryPayload>({ name, classes, props, stylesCtx, className, style, rootSelector, unstyled, classNames, styles, vars, varsResolver, attributes, stable, }: UseStylesInput<Payload>): GetStylesApi<Payload>;

package/lib/core/utils/shallow-equal/shallow-equal.d.ts

@@ -0,0 +1 @@
+export declare function shallowEqual(a: unknown, b: unknown, depth?: number): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.6.2",
+  "version": "9.7.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.6.2",
+    "@mantine/hooks": "9.7.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -52,12 +52,12 @@
     "clsx": "^2.1.1",
     "react-number-format": "^5.4.5",
     "react-remove-scroll": "^2.7.2",
-    "type-fest": "^5.8.0"
+    "type-fest": "^5.10.0"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.8",
-    "react-dom": "19.2.8"
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
   }
 }

package/styles/ActionBar.css

@@ -4,6 +4,7 @@
   gap: var(--mantine-spacing-sm);
   width: fit-content;
   margin-inline: auto;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
 }
 
 .m_eab73b29 {

package/styles/ActionBar.layer.css

@@ -4,6 +4,7 @@
   gap: var(--mantine-spacing-sm);
   width: fit-content;
   margin-inline: auto;
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
 }
 
 .m_eab73b29 {

package/styles/AppShell.css

@@ -176,6 +176,7 @@
   padding-bottom: env(safe-area-inset-bottom);
   transform: var(--app-shell-footer-transform);
   z-index: var(--app-shell-footer-z-index);
+  --app-shell-footer-safe-area: env(safe-area-inset-bottom);
 }
 
 :where([data-mode='static']) .m_3840c879 {
@@ -199,3 +200,70 @@
 .m_6dcfc7c7:where([data-grow]) {
     flex-grow: 1;
   }
+
+.m_3b25945a {
+  position: absolute;
+  z-index: 1;
+  outline: none;
+  touch-action: none;
+  background-color: transparent;
+}
+
+.m_3b25945a::after {
+    content: '';
+    position: absolute;
+    background-color: transparent;
+    transition: background-color 100ms ease;
+  }
+
+.m_3b25945a:where(:hover, [data-active])::after, .m_3b25945a:where(:focus-visible)::after {
+    background-color: var(--mantine-primary-color-filled);
+  }
+
+.m_3b25945a:where([data-orientation='vertical']) {
+    top: 0;
+    bottom: 0;
+    width: var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale)));
+    cursor: col-resize;
+  }
+
+.m_3b25945a:where([data-orientation='vertical'])::after {
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: calc(0.125rem * var(--mantine-scale));
+      transform: translateX(-50%);
+    }
+
+.m_3b25945a:where([data-orientation='horizontal']) {
+    inset-inline: 0;
+    height: var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale)));
+    cursor: row-resize;
+  }
+
+.m_3b25945a:where([data-orientation='horizontal'])::after {
+      inset-inline: 0;
+      top: 50%;
+      height: calc(0.125rem * var(--mantine-scale));
+      transform: translateY(-50%);
+    }
+
+.m_3b25945a:where([data-section='navbar']) {
+    inset-inline-end: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-navbar-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='aside']) {
+    inset-inline-start: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-aside-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='header']) {
+    bottom: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-header-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='footer']) {
+    top: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-footer-resize-handle-display, block);
+  }

package/styles/AppShell.layer.css

@@ -176,6 +176,7 @@
   padding-bottom: env(safe-area-inset-bottom);
   transform: var(--app-shell-footer-transform);
   z-index: var(--app-shell-footer-z-index);
+  --app-shell-footer-safe-area: env(safe-area-inset-bottom);
 }
 
 :where([data-mode='static']) .m_3840c879 {
@@ -199,4 +200,71 @@
 .m_6dcfc7c7:where([data-grow]) {
     flex-grow: 1;
   }
+
+.m_3b25945a {
+  position: absolute;
+  z-index: 1;
+  outline: none;
+  touch-action: none;
+  background-color: transparent;
+}
+
+.m_3b25945a::after {
+    content: '';
+    position: absolute;
+    background-color: transparent;
+    transition: background-color 100ms ease;
+  }
+
+.m_3b25945a:where(:hover, [data-active])::after, .m_3b25945a:where(:focus-visible)::after {
+    background-color: var(--mantine-primary-color-filled);
+  }
+
+.m_3b25945a:where([data-orientation='vertical']) {
+    top: 0;
+    bottom: 0;
+    width: var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale)));
+    cursor: col-resize;
+  }
+
+.m_3b25945a:where([data-orientation='vertical'])::after {
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: calc(0.125rem * var(--mantine-scale));
+      transform: translateX(-50%);
+    }
+
+.m_3b25945a:where([data-orientation='horizontal']) {
+    inset-inline: 0;
+    height: var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale)));
+    cursor: row-resize;
+  }
+
+.m_3b25945a:where([data-orientation='horizontal'])::after {
+      inset-inline: 0;
+      top: 50%;
+      height: calc(0.125rem * var(--mantine-scale));
+      transform: translateY(-50%);
+    }
+
+.m_3b25945a:where([data-section='navbar']) {
+    inset-inline-end: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-navbar-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='aside']) {
+    inset-inline-start: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-aside-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='header']) {
+    bottom: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-header-resize-handle-display, block);
+  }
+
+.m_3b25945a:where([data-section='footer']) {
+    top: calc(var(--app-shell-resize-handle-size, calc(0.375rem * var(--mantine-scale))) / -2);
+    display: var(--app-shell-footer-resize-handle-display, block);
+  }
 }

package/styles/Checkbox.css

@@ -17,6 +17,10 @@
     --checkbox-icon-color: var(--checkbox-color);
   }
 
+  .m_bf2d988c:where([data-variant='light']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
 .m_26062bec {
   position: relative;
   width: var(--checkbox-size);
@@ -79,6 +83,22 @@
       color: var(--mantine-color-disabled-color);
     }
 
+.m_595ab216 + .m_bf295423 {
+    color: var(--checkbox-color);
+  }
+
+.m_595ab216[data-indeterminate]:not(:disabled),
+  .m_595ab216:checked:not(:disabled) {
+    background-color: var(--checkbox-bg);
+    border-color: transparent;
+  }
+
+.m_595ab216[data-indeterminate]:not(:disabled) + .m_bf295423, .m_595ab216:checked:not(:disabled) + .m_bf295423 {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_215c4542 + .m_bf295423 {
     color: var(--checkbox-color);
   }

package/styles/Checkbox.layer.css

@@ -17,6 +17,10 @@
     --checkbox-icon-color: var(--checkbox-color);
   }
 
+  .m_bf2d988c:where([data-variant='light']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
 .m_26062bec {
   position: relative;
   width: var(--checkbox-size);
@@ -79,6 +83,22 @@
       color: var(--mantine-color-disabled-color);
     }
 
+.m_595ab216 + .m_bf295423 {
+    color: var(--checkbox-color);
+  }
+
+.m_595ab216[data-indeterminate]:not(:disabled),
+  .m_595ab216:checked:not(:disabled) {
+    background-color: var(--checkbox-bg);
+    border-color: transparent;
+  }
+
+.m_595ab216[data-indeterminate]:not(:disabled) + .m_bf295423, .m_595ab216:checked:not(:disabled) + .m_bf295423 {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_215c4542 + .m_bf295423 {
     color: var(--checkbox-color);
   }

package/styles/CheckboxIndicator.css

@@ -17,6 +17,10 @@
     --checkbox-icon-color: var(--checkbox-color);
   }
 
+  .m_5e5256ee:where([data-variant='light']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
   .m_5e5256ee {
 
   position: relative;
@@ -72,6 +76,18 @@
         color: var(--mantine-color-dark-3);
 }
 
+.m_193e54c8[data-indeterminate]:not([data-disabled]),
+  .m_193e54c8[data-checked]:not([data-disabled]) {
+    background-color: var(--checkbox-bg);
+    border-color: transparent;
+  }
+
+.m_193e54c8[data-indeterminate]:not([data-disabled]) > .m_1b1c543a, .m_193e54c8[data-checked]:not([data-disabled]) > .m_1b1c543a {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_76e20374[data-indeterminate]:not([data-disabled]),
   .m_76e20374[data-checked]:not([data-disabled]) {
     background-color: transparent;

package/styles/CheckboxIndicator.layer.css

@@ -17,6 +17,10 @@
     --checkbox-icon-color: var(--checkbox-color);
   }
 
+  .m_5e5256ee:where([data-variant='light']) {
+    --checkbox-icon-color: var(--checkbox-color);
+  }
+
   .m_5e5256ee {
 
   position: relative;
@@ -72,6 +76,18 @@
         color: var(--mantine-color-dark-3);
 }
 
+.m_193e54c8[data-indeterminate]:not([data-disabled]),
+  .m_193e54c8[data-checked]:not([data-disabled]) {
+    background-color: var(--checkbox-bg);
+    border-color: transparent;
+  }
+
+.m_193e54c8[data-indeterminate]:not([data-disabled]) > .m_1b1c543a, .m_193e54c8[data-checked]:not([data-disabled]) > .m_1b1c543a {
+      color: var(--checkbox-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_76e20374[data-indeterminate]:not([data-disabled]),
   .m_76e20374[data-checked]:not([data-disabled]) {
     background-color: transparent;

package/styles/Dialog.css

@@ -10,6 +10,7 @@
   width: var(--dialog-size);
   max-width: calc(100vw - var(--mantine-spacing-xl) * 2);
   min-height: 50px;
+  padding: var(--mantine-spacing-md);
 }
 
 .m_5abab665 {

package/styles/Dialog.layer.css

@@ -10,6 +10,7 @@
   width: var(--dialog-size);
   max-width: calc(100vw - var(--mantine-spacing-xl) * 2);
   min-height: 50px;
+  padding: var(--mantine-spacing-md);
 }
 
 .m_5abab665 {

package/styles/Marquee.css

@@ -98,7 +98,7 @@
 .m_1f9675ae {
   display: flex;
   gap: var(--marquee-gap, var(--mantine-spacing-md));
-  animation-duration: var(--marquee-duration, 40000ms);
+  animation-duration: var(--marquee-duration, 100000ms);
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }

package/styles/Marquee.layer.css

@@ -98,7 +98,7 @@
 .m_1f9675ae {
   display: flex;
   gap: var(--marquee-gap, var(--mantine-spacing-md));
-  animation-duration: var(--marquee-duration, 40000ms);
+  animation-duration: var(--marquee-duration, 100000ms);
   animation-timing-function: linear;
   animation-iteration-count: infinite;
 }

package/styles/Radio.css

@@ -94,6 +94,16 @@
     border-color: var(--mantine-color-error);
   }
 
+.m_99d09bcd:checked:not(:disabled) {
+    background-color: var(--radio-bg);
+    border-color: transparent;
+  }
+
+.m_99d09bcd:checked:not(:disabled) + .m_f3ed6b2b {
+      --radio-icon-opacity: 1;
+      --radio-icon-transform: none;
+    }
+
 .m_1bfe9d39 + .m_f3ed6b2b {
     --radio-icon-color: var(--radio-color);
   }

package/styles/Radio.layer.css

@@ -94,6 +94,16 @@
     border-color: var(--mantine-color-error);
   }
 
+.m_99d09bcd:checked:not(:disabled) {
+    background-color: var(--radio-bg);
+    border-color: transparent;
+  }
+
+.m_99d09bcd:checked:not(:disabled) + .m_f3ed6b2b {
+      --radio-icon-opacity: 1;
+      --radio-icon-transform: none;
+    }
+
 .m_1bfe9d39 + .m_f3ed6b2b {
     --radio-icon-color: var(--radio-color);
   }

package/styles/RadioIndicator.css

@@ -64,6 +64,17 @@
       color: var(--mantine-color-disabled-color);
     }
 
+.m_7eec72c0[data-checked]:not([data-disabled]) {
+    background-color: var(--radio-bg);
+    border-color: transparent;
+  }
+
+.m_7eec72c0[data-checked]:not([data-disabled]) > .m_3e4da632 {
+      color: var(--radio-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_2980836c[data-checked]:not([data-disabled]) {
     background-color: transparent;
     border-color: var(--radio-color);

package/styles/RadioIndicator.layer.css

@@ -64,6 +64,17 @@
       color: var(--mantine-color-disabled-color);
     }
 
+.m_7eec72c0[data-checked]:not([data-disabled]) {
+    background-color: var(--radio-bg);
+    border-color: transparent;
+  }
+
+.m_7eec72c0[data-checked]:not([data-disabled]) > .m_3e4da632 {
+      color: var(--radio-icon-color);
+      opacity: 1;
+      transform: none;
+    }
+
 .m_2980836c[data-checked]:not([data-disabled]) {
     background-color: transparent;
     border-color: var(--radio-color);

package/styles/Toggle.css

@@ -0,0 +1,98 @@
+.m_ba2e839b {
+  --toggle-size-xs: 22px;
+  --toggle-size-sm: 26px;
+  --toggle-size-md: 30px;
+  --toggle-size-lg: 36px;
+  --toggle-size-xl: 42px;
+
+  --toggle-size: var(--toggle-size-md);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid;
+  border-radius: var(--toggle-radius, var(--mantine-radius-default));
+  cursor: pointer;
+  appearance: none;
+  text-decoration: none;
+  line-height: 1;
+  user-select: none;
+  font-size: var(--mantine-font-size-xs);
+  width: var(--toggle-size);
+  min-width: var(--toggle-size);
+  height: var(--toggle-size);
+  padding: calc(var(--toggle-size) / 5);
+  font-weight: var(--mantine-font-weight-medium);
+}
+
+  .m_ba2e839b:where([data-auto-width]) {
+    width: auto;
+    padding: 0 calc(var(--toggle-size) / 4);
+  }
+
+  :where([data-mantine-color-scheme='light']) .m_ba2e839b {
+    background-color: var(--mantine-color-white);
+    border-color: var(--mantine-color-gray-4);
+    color: var(--mantine-color-gray-7);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_ba2e839b {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+    color: var(--mantine-color-dark-1);
+}
+
+  @media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_ba2e839b:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_ba2e839b:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  @media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_ba2e839b:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_ba2e839b:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  .m_ba2e839b:where([data-active]) {
+    background-color: var(--toggle-active-bg, var(--mantine-primary-color-light));
+    color: var(--toggle-active-color, var(--mantine-primary-color-light-color));
+    border-color: transparent;
+  }
+
+  @media (hover: hover) {
+      .m_ba2e839b:where([data-active]):hover:where(:not([data-disabled])) {
+        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));
+      }
+}
+
+  @media (hover: none) {
+      .m_ba2e839b:where([data-active]):active:where(:not([data-disabled])) {
+        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));
+      }
+}
+
+  .m_ba2e839b:where([data-disabled]) {
+    cursor: not-allowed;
+    color: var(--mantine-color-disabled-color);
+    background-color: var(--mantine-color-disabled);
+    border-color: transparent;
+  }
+
+  :where([data-mantine-color-scheme='light']) .m_ba2e839b:where([data-disabled][data-active]) {
+      background-color: var(--mantine-color-gray-4);
+      color: var(--mantine-color-gray-6);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_ba2e839b:where([data-disabled][data-active]) {
+      background-color: var(--mantine-color-dark-4);
+      color: var(--mantine-color-dark-2);
+}

package/styles/Toggle.layer.css

@@ -0,0 +1,99 @@
+@layer mantine {.m_ba2e839b {
+  --toggle-size-xs: 22px;
+  --toggle-size-sm: 26px;
+  --toggle-size-md: 30px;
+  --toggle-size-lg: 36px;
+  --toggle-size-xl: 42px;
+
+  --toggle-size: var(--toggle-size-md);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid;
+  border-radius: var(--toggle-radius, var(--mantine-radius-default));
+  cursor: pointer;
+  appearance: none;
+  text-decoration: none;
+  line-height: 1;
+  user-select: none;
+  font-size: var(--mantine-font-size-xs);
+  width: var(--toggle-size);
+  min-width: var(--toggle-size);
+  height: var(--toggle-size);
+  padding: calc(var(--toggle-size) / 5);
+  font-weight: var(--mantine-font-weight-medium);
+}
+
+  .m_ba2e839b:where([data-auto-width]) {
+    width: auto;
+    padding: 0 calc(var(--toggle-size) / 4);
+  }
+
+  :where([data-mantine-color-scheme='light']) .m_ba2e839b {
+    background-color: var(--mantine-color-white);
+    border-color: var(--mantine-color-gray-4);
+    color: var(--mantine-color-gray-7);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_ba2e839b {
+    background-color: var(--mantine-color-dark-6);
+    border-color: var(--mantine-color-dark-4);
+    color: var(--mantine-color-dark-1);
+}
+
+  @media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_ba2e839b:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_ba2e839b:hover:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  @media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_ba2e839b:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-gray-0);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_ba2e839b:active:where(:not([data-disabled], [data-active])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+  .m_ba2e839b:where([data-active]) {
+    background-color: var(--toggle-active-bg, var(--mantine-primary-color-light));
+    color: var(--toggle-active-color, var(--mantine-primary-color-light-color));
+    border-color: transparent;
+  }
+
+  @media (hover: hover) {
+      .m_ba2e839b:where([data-active]):hover:where(:not([data-disabled])) {
+        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));
+      }
+}
+
+  @media (hover: none) {
+      .m_ba2e839b:where([data-active]):active:where(:not([data-disabled])) {
+        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));
+      }
+}
+
+  .m_ba2e839b:where([data-disabled]) {
+    cursor: not-allowed;
+    color: var(--mantine-color-disabled-color);
+    background-color: var(--mantine-color-disabled);
+    border-color: transparent;
+  }
+
+  :where([data-mantine-color-scheme='light']) .m_ba2e839b:where([data-disabled][data-active]) {
+      background-color: var(--mantine-color-gray-4);
+      color: var(--mantine-color-gray-6);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_ba2e839b:where([data-disabled][data-active]) {
+      background-color: var(--mantine-color-dark-4);
+      color: var(--mantine-color-dark-2);
+}
+}