@mantine/core 7.12.1 → 7.13.0

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

@@ -1,7 +1,7 @@
 import { MantineTheme } from '../../../MantineProvider';
 import type { SystemPropData } from '../style-props-data';
 import type { StyleProp } from '../style-props.types';
-import type { SortMediaQueriesResult } from './sort-media-queries';
+import { SortMediaQueriesResult } from './sort-media-queries';
 interface ParseStylePropsOptions {
     styleProps: Record<string, StyleProp<any>>;
     theme: MantineTheme;

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

@@ -1,88 +1,88 @@
 import type { MantineBreakpoint, MantineColor, MantineFontSize, MantineLineHeight, MantineSpacing } from '../../MantineProvider';
 export type StyleProp<Value> = Value | Partial<Record<MantineBreakpoint | (string & {}), Value>>;
 export interface MantineStyleProps {
-    /** margin, theme key: theme.spacing */
+    /** Margin, theme key: theme.spacing */
     m?: StyleProp<MantineSpacing>;
-    /** marginBlock, theme key: theme.spacing */
+    /** MarginBlock, theme key: theme.spacing */
     my?: StyleProp<MantineSpacing>;
-    /** marginInline, theme key: theme.spacing */
+    /** MarginInline, theme key: theme.spacing */
     mx?: StyleProp<MantineSpacing>;
-    /** marginTop, theme key: theme.spacing */
+    /** MarginTop, theme key: theme.spacing */
     mt?: StyleProp<MantineSpacing>;
-    /** marginBottom, theme key: theme.spacing */
+    /** MarginBottom, theme key: theme.spacing */
     mb?: StyleProp<MantineSpacing>;
-    /** marginInlineStart, theme key: theme.spacing */
+    /** MarginInlineStart, theme key: theme.spacing */
     ms?: StyleProp<MantineSpacing>;
-    /** marginInlineEnd, theme key: theme.spacing */
+    /** MarginInlineEnd, theme key: theme.spacing */
     me?: StyleProp<MantineSpacing>;
-    /** marginLeft, theme key: theme.spacing */
+    /** MarginLeft, theme key: theme.spacing */
     ml?: StyleProp<MantineSpacing>;
-    /** marginRight, theme key: theme.spacing */
+    /** MarginRight, theme key: theme.spacing */
     mr?: StyleProp<MantineSpacing>;
-    /** padding, theme key: theme.spacing */
+    /** Padding, theme key: theme.spacing */
     p?: StyleProp<MantineSpacing>;
-    /** paddingBlock, theme key: theme.spacing */
+    /** PaddingBlock, theme key: theme.spacing */
     py?: StyleProp<MantineSpacing>;
-    /** paddingInline, theme key: theme.spacing */
+    /** PaddingInline, theme key: theme.spacing */
     px?: StyleProp<MantineSpacing>;
-    /** paddingTop, theme key: theme.spacing */
+    /** PaddingTop, theme key: theme.spacing */
     pt?: StyleProp<MantineSpacing>;
-    /** paddingBottom, theme key: theme.spacing */
+    /** PaddingBottom, theme key: theme.spacing */
     pb?: StyleProp<MantineSpacing>;
-    /** paddingInlineStart, theme key: theme.spacing */
+    /** PaddingInlineStart, theme key: theme.spacing */
     ps?: StyleProp<MantineSpacing>;
-    /** paddingInlineEnd, theme key: theme.spacing */
+    /** PaddingInlineEnd, theme key: theme.spacing */
     pe?: StyleProp<MantineSpacing>;
-    /** paddingLeft, theme key: theme.spacing */
+    /** PaddingLeft, theme key: theme.spacing */
     pl?: StyleProp<MantineSpacing>;
-    /** paddingRight, theme key: theme.spacing */
+    /** PaddingRight, theme key: theme.spacing */
     pr?: StyleProp<MantineSpacing>;
-    /** border */
+    /** Border */
     bd?: StyleProp<React.CSSProperties['border']>;
-    /** background, theme key: theme.colors */
+    /** Background, theme key: theme.colors */
     bg?: StyleProp<MantineColor>;
-    /** color */
+    /** Color */
     c?: StyleProp<MantineColor>;
     opacity?: StyleProp<React.CSSProperties['opacity']>;
-    /** fontFamily */
+    /** FontFamily */
     ff?: StyleProp<'monospace' | 'text' | 'heading' | (string & {})>;
-    /** fontSize, theme key: theme.fontSizes */
+    /** FontSize, theme key: theme.fontSizes */
     fz?: StyleProp<MantineFontSize | `h${1 | 2 | 3 | 4 | 5 | 6}` | number | (string & {})>;
-    /** fontWeight */
+    /** FontWeight */
     fw?: StyleProp<React.CSSProperties['fontWeight']>;
-    /** letterSpacing */
+    /** LetterSpacing */
     lts?: StyleProp<React.CSSProperties['letterSpacing']>;
-    /** textAlign */
+    /** TextAlign */
     ta?: StyleProp<React.CSSProperties['textAlign']>;
-    /** lineHeight, theme key: lineHeights */
+    /** LineHeight, theme key: lineHeights */
     lh?: StyleProp<MantineLineHeight | `h${1 | 2 | 3 | 4 | 5 | 6}` | number | (string & {})>;
-    /** fontStyle */
+    /** FontStyle */
     fs?: StyleProp<React.CSSProperties['fontStyle']>;
-    /** textTransform */
+    /** TextTransform */
     tt?: StyleProp<React.CSSProperties['textTransform']>;
-    /** textDecoration */
+    /** TextDecoration */
     td?: StyleProp<React.CSSProperties['textDecoration']>;
-    /** width, theme key: theme.spacing */
+    /** Width, theme key: theme.spacing */
     w?: StyleProp<React.CSSProperties['width']>;
-    /** minWidth, theme key: theme.spacing*/
+    /** MinWidth, theme key: theme.spacing*/
     miw?: StyleProp<React.CSSProperties['minWidth']>;
-    /** maxWidth, theme key: theme.spacing */
+    /** MaxWidth, theme key: theme.spacing */
     maw?: StyleProp<React.CSSProperties['maxWidth']>;
-    /** height, theme key: theme.spacing */
+    /** Height, theme key: theme.spacing */
     h?: StyleProp<React.CSSProperties['height']>;
-    /** minHeight, theme key: theme.spacing */
+    /** MinHeight, theme key: theme.spacing */
     mih?: StyleProp<React.CSSProperties['minHeight']>;
-    /** maxHeight, theme key: theme.spacing */
+    /** MaxHeight, theme key: theme.spacing */
     mah?: StyleProp<React.CSSProperties['maxHeight']>;
-    /** backgroundSize */
+    /** BackgroundSize */
     bgsz?: StyleProp<React.CSSProperties['backgroundSize']>;
-    /** backgroundPosition */
+    /** BackgroundPosition */
     bgp?: StyleProp<React.CSSProperties['backgroundPosition']>;
-    /** backgroundRepeat */
+    /** BackgroundRepeat */
     bgr?: StyleProp<React.CSSProperties['backgroundRepeat']>;
-    /** backgroundAttachment */
+    /** BackgroundAttachment */
     bga?: StyleProp<React.CSSProperties['backgroundAttachment']>;
-    /** position */
+    /** Position */
     pos?: StyleProp<React.CSSProperties['position']>;
     top?: StyleProp<React.CSSProperties['top']>;
     left?: StyleProp<React.CSSProperties['left']>;

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

@@ -7,7 +7,7 @@ export interface MantineTheme {
      *  - `never` – focus ring is always hidden (not recommended)
      */
     focusRing: 'auto' | 'always' | 'never';
-    /** rem units scale, change if you customize font-size of `<html />` element
+    /** Rem units scale, change if you customize font-size of `<html />` element
      *  default value is `1` (for `100%`/`16px` font-size on `<html />`)
      */
     scale: number;
@@ -49,7 +49,7 @@ export interface MantineTheme {
      *  Default value is `0.3`
      * */
     luminanceThreshold: number;
-    /** font-family used in all components, system fonts by default */
+    /** Font-family used in all components, system fonts by default */
     fontFamily: string;
     /** Monospace font-family, used in code and other similar components, system fonts by default  */
     fontFamilyMonospace: string;

package/lib/core/utils/get-breakpoint-value/get-breakpoint-value.d.ts

@@ -1,2 +1,3 @@
-import type { MantineTheme } from '../../MantineProvider';
-export declare function getBreakpointValue(breakpoint: number | string, theme: MantineTheme): number;
+import type { MantineBreakpoint } from '../../MantineProvider';
+export type BreakpointsSource = Record<MantineBreakpoint, number | string>;
+export declare function getBreakpointValue(breakpoint: number | string, breakpoints: BreakpointsSource): number;

package/lib/core/utils/get-sorted-breakpoints/get-sorted-breakpoints.d.ts

@@ -1,5 +1,5 @@
-import type { MantineTheme } from '../../MantineProvider';
-export declare function getSortedBreakpoints(breakpoints: string[], theme: MantineTheme): {
+import { BreakpointsSource } from '../get-breakpoint-value/get-breakpoint-value';
+export declare function getSortedBreakpoints(values: string[], breakpoints: BreakpointsSource): {
     value: string;
     px: number;
 }[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.12.1",
+  "version": "7.13.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": "7.12.1",
+    "@mantine/hooks": "7.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -57,6 +57,6 @@
   },
   "devDependencies": {
     "@mantine-tests/core": "1.1.0",
-    "@mantine/hooks": "7.12.1"
+    "@mantine/hooks": "7.13.0"
   }
 }

package/styles/Badge.css

@@ -24,7 +24,8 @@
   --badge-lh: calc(var(--badge-height) - calc(0.125rem * var(--mantine-scale)));
   --badge-color: var(--mantine-color-white);
   --badge-bg: var(--mantine-primary-color-filled);
-  --badge-bd: 1px solid transparent;
+  --badge-border-width: 1px;
+  --badge-bd: var(--badge-border-width) solid transparent;
 
   -webkit-tap-highlight-color: transparent;
   font-size: var(--badge-fz);
@@ -33,8 +34,7 @@
   line-height: var(--badge-lh);
   text-decoration: none;
   padding: 0 var(--badge-padding-x);
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  display: inline-grid;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -49,6 +49,18 @@
   border: var(--badge-bd);
 }
 
+  .m_347db0ec:where([data-with-right-section]) {
+    grid-template-columns: 1fr auto;
+  }
+
+  .m_347db0ec:where([data-with-left-section], [data-variant='dot']) {
+    grid-template-columns: auto 1fr;
+  }
+
+  .m_347db0ec:where([data-with-left-section][data-with-right-section]) {
+    grid-template-columns: auto 1fr auto;
+  }
+
   .m_347db0ec:where([data-block]) {
     display: flex;
     width: 100%;
@@ -90,6 +102,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: center;
 }
 
 .m_91fdda9b {
@@ -98,6 +111,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
+  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
 }
 
 .m_91fdda9b:where([data-position='left']) {

package/styles/Badge.layer.css

@@ -24,7 +24,8 @@
   --badge-lh: calc(var(--badge-height) - calc(0.125rem * var(--mantine-scale)));
   --badge-color: var(--mantine-color-white);
   --badge-bg: var(--mantine-primary-color-filled);
-  --badge-bd: 1px solid transparent;
+  --badge-border-width: 1px;
+  --badge-bd: var(--badge-border-width) solid transparent;
 
   -webkit-tap-highlight-color: transparent;
   font-size: var(--badge-fz);
@@ -33,8 +34,7 @@
   line-height: var(--badge-lh);
   text-decoration: none;
   padding: 0 var(--badge-padding-x);
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  display: inline-grid;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -49,6 +49,18 @@
   border: var(--badge-bd);
 }
 
+  .m_347db0ec:where([data-with-right-section]) {
+    grid-template-columns: 1fr auto;
+  }
+
+  .m_347db0ec:where([data-with-left-section], [data-variant='dot']) {
+    grid-template-columns: auto 1fr;
+  }
+
+  .m_347db0ec:where([data-with-left-section][data-with-right-section]) {
+    grid-template-columns: auto 1fr auto;
+  }
+
   .m_347db0ec:where([data-block]) {
     display: flex;
     width: 100%;
@@ -90,6 +102,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: center;
 }
 
 .m_91fdda9b {
@@ -98,6 +111,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
+  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
 }
 
 .m_91fdda9b:where([data-position='left']) {

package/styles/Grid.css

@@ -1,3 +1,7 @@
+.m_8478a6da {
+  container: mantine-grid / inline-size;
+}
+
 .m_410352e9 {
   --grid-overflow: visible;
   --grid-margin: calc(var(--grid-gutter) / -2);

package/styles/Grid.layer.css

@@ -1,4 +1,8 @@
-@layer mantine {.m_410352e9 {
+@layer mantine {.m_8478a6da {
+  container: mantine-grid / inline-size;
+}
+
+.m_410352e9 {
   --grid-overflow: visible;
   --grid-margin: calc(var(--grid-gutter) / -2);
   --grid-col-padding: calc(var(--grid-gutter) / 2);

package/styles/TypographyStylesProvider.css

@@ -161,30 +161,35 @@
     caption-side: bottom;
     margin-bottom: var(--mantine-spacing-md);
   }
+  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(table) {
+      --table-border-color: var(--mantine-color-gray-3);
+}
+  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(table) {
+      --table-border-color: var(--mantine-color-dark-4);
+}
   .m_d6493fad :where(table) :where(caption) {
       margin-top: var(--mantine-spacing-xs);
       font-size: var(--mantine-font-size-sm);
-      color: var(--mantine-color-gray-6);
+      color: var(--mantine-color-dimmed);
     }
   .m_d6493fad :where(table) :where(th) {
       text-align: left;
       font-weight: bold;
-      color: var(--mantine-color-gray-7);
       font-size: var(--mantine-font-size-sm);
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     }
   .m_d6493fad :where(table) :where(thead th) {
       border-bottom: 1px solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
     }
   .m_d6493fad :where(table) :where(tfoot th) {
       border-top: 1px solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
     }
   .m_d6493fad :where(table) :where(td) {
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
       border-bottom: 1px solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
       font-size: var(--mantine-font-size-sm);
     }
   .m_d6493fad :where(table) :where(tr:last-of-type td) {

package/styles/TypographyStylesProvider.layer.css

@@ -161,30 +161,35 @@
     caption-side: bottom;
     margin-bottom: var(--mantine-spacing-md);
   }
+  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(table) {
+      --table-border-color: var(--mantine-color-gray-3);
+}
+  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(table) {
+      --table-border-color: var(--mantine-color-dark-4);
+}
   .m_d6493fad :where(table) :where(caption) {
       margin-top: var(--mantine-spacing-xs);
       font-size: var(--mantine-font-size-sm);
-      color: var(--mantine-color-gray-6);
+      color: var(--mantine-color-dimmed);
     }
   .m_d6493fad :where(table) :where(th) {
       text-align: left;
       font-weight: bold;
-      color: var(--mantine-color-gray-7);
       font-size: var(--mantine-font-size-sm);
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     }
   .m_d6493fad :where(table) :where(thead th) {
       border-bottom: 1px solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
     }
   .m_d6493fad :where(table) :where(tfoot th) {
       border-top: 1px solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
     }
   .m_d6493fad :where(table) :where(td) {
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
       border-bottom: 1px solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
       font-size: var(--mantine-font-size-sm);
     }
   .m_d6493fad :where(table) :where(tr:last-of-type td) {

package/styles.css

@@ -2700,7 +2700,8 @@ fieldset:disabled .m_d3ea56bb,
   --badge-lh: calc(var(--badge-height) - calc(0.125rem * var(--mantine-scale)));
   --badge-color: var(--mantine-color-white);
   --badge-bg: var(--mantine-primary-color-filled);
-  --badge-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;
+  --badge-border-width: calc(0.0625rem * var(--mantine-scale));
+  --badge-bd: var(--badge-border-width) solid transparent;
 
   -webkit-tap-highlight-color: transparent;
   font-size: var(--badge-fz);
@@ -2709,8 +2710,7 @@ fieldset:disabled .m_d3ea56bb,
   line-height: var(--badge-lh);
   text-decoration: none;
   padding: 0 var(--badge-padding-x);
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  display: inline-grid;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -2725,6 +2725,18 @@ fieldset:disabled .m_d3ea56bb,
   border: var(--badge-bd);
 }
 
+  .m_347db0ec:where([data-with-right-section]) {
+    grid-template-columns: 1fr auto;
+  }
+
+  .m_347db0ec:where([data-with-left-section], [data-variant='dot']) {
+    grid-template-columns: auto 1fr;
+  }
+
+  .m_347db0ec:where([data-with-left-section][data-with-right-section]) {
+    grid-template-columns: auto 1fr auto;
+  }
+
   .m_347db0ec:where([data-block]) {
     display: flex;
     width: 100%;
@@ -2766,6 +2778,7 @@ fieldset:disabled .m_d3ea56bb,
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: center;
 }
 
 .m_91fdda9b {
@@ -2774,6 +2787,7 @@ fieldset:disabled .m_d3ea56bb,
   display: inline-flex;
   justify-content: center;
   align-items: center;
+  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
 }
 
 .m_91fdda9b:where([data-position='left']) {
@@ -3873,6 +3887,10 @@ fieldset:disabled .m_d3ea56bb,
   margin-bottom: var(--mantine-spacing-sm);
 }
 
+.m_8478a6da {
+  container: mantine-grid / inline-size;
+}
+
 .m_410352e9 {
   --grid-overflow: visible;
   --grid-margin: calc(var(--grid-gutter) / -2);
@@ -7330,30 +7348,35 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
     caption-side: bottom;
     margin-bottom: var(--mantine-spacing-md);
   }
+  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(table) {
+      --table-border-color: var(--mantine-color-gray-3);
+}
+  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(table) {
+      --table-border-color: var(--mantine-color-dark-4);
+}
   .m_d6493fad :where(table) :where(caption) {
       margin-top: var(--mantine-spacing-xs);
       font-size: var(--mantine-font-size-sm);
-      color: var(--mantine-color-gray-6);
+      color: var(--mantine-color-dimmed);
     }
   .m_d6493fad :where(table) :where(th) {
       text-align: left;
       font-weight: bold;
-      color: var(--mantine-color-gray-7);
       font-size: var(--mantine-font-size-sm);
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     }
   .m_d6493fad :where(table) :where(thead th) {
       border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
     }
   .m_d6493fad :where(table) :where(tfoot th) {
       border-top: calc(0.0625rem * var(--mantine-scale)) solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
     }
   .m_d6493fad :where(table) :where(td) {
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
       border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
       font-size: var(--mantine-font-size-sm);
     }
   .m_d6493fad :where(table) :where(tr:last-of-type td) {

package/styles.layer.css

@@ -2700,7 +2700,8 @@ fieldset:disabled .m_d3ea56bb,
   --badge-lh: calc(var(--badge-height) - calc(0.125rem * var(--mantine-scale)));
   --badge-color: var(--mantine-color-white);
   --badge-bg: var(--mantine-primary-color-filled);
-  --badge-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;
+  --badge-border-width: calc(0.0625rem * var(--mantine-scale));
+  --badge-bd: var(--badge-border-width) solid transparent;
 
   -webkit-tap-highlight-color: transparent;
   font-size: var(--badge-fz);
@@ -2709,8 +2710,7 @@ fieldset:disabled .m_d3ea56bb,
   line-height: var(--badge-lh);
   text-decoration: none;
   padding: 0 var(--badge-padding-x);
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  display: inline-grid;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -2725,6 +2725,18 @@ fieldset:disabled .m_d3ea56bb,
   border: var(--badge-bd);
 }
 
+  .m_347db0ec:where([data-with-right-section]) {
+    grid-template-columns: 1fr auto;
+  }
+
+  .m_347db0ec:where([data-with-left-section], [data-variant='dot']) {
+    grid-template-columns: auto 1fr;
+  }
+
+  .m_347db0ec:where([data-with-left-section][data-with-right-section]) {
+    grid-template-columns: auto 1fr auto;
+  }
+
   .m_347db0ec:where([data-block]) {
     display: flex;
     width: 100%;
@@ -2766,6 +2778,7 @@ fieldset:disabled .m_d3ea56bb,
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: center;
 }
 
 .m_91fdda9b {
@@ -2774,6 +2787,7 @@ fieldset:disabled .m_d3ea56bb,
   display: inline-flex;
   justify-content: center;
   align-items: center;
+  max-height: calc(var(--badge-height) - var(--badge-border-width) * 2);
 }
 
 .m_91fdda9b:where([data-position='left']) {
@@ -3873,6 +3887,10 @@ fieldset:disabled .m_d3ea56bb,
   margin-bottom: var(--mantine-spacing-sm);
 }
 
+.m_8478a6da {
+  container: mantine-grid / inline-size;
+}
+
 .m_410352e9 {
   --grid-overflow: visible;
   --grid-margin: calc(var(--grid-gutter) / -2);
@@ -7330,30 +7348,35 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
     caption-side: bottom;
     margin-bottom: var(--mantine-spacing-md);
   }
+  :where([data-mantine-color-scheme='light']) .m_d6493fad :where(table) {
+      --table-border-color: var(--mantine-color-gray-3);
+}
+  :where([data-mantine-color-scheme='dark']) .m_d6493fad :where(table) {
+      --table-border-color: var(--mantine-color-dark-4);
+}
   .m_d6493fad :where(table) :where(caption) {
       margin-top: var(--mantine-spacing-xs);
       font-size: var(--mantine-font-size-sm);
-      color: var(--mantine-color-gray-6);
+      color: var(--mantine-color-dimmed);
     }
   .m_d6493fad :where(table) :where(th) {
       text-align: left;
       font-weight: bold;
-      color: var(--mantine-color-gray-7);
       font-size: var(--mantine-font-size-sm);
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     }
   .m_d6493fad :where(table) :where(thead th) {
       border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
     }
   .m_d6493fad :where(table) :where(tfoot th) {
       border-top: calc(0.0625rem * var(--mantine-scale)) solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
     }
   .m_d6493fad :where(table) :where(td) {
       padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
       border-bottom: calc(0.0625rem * var(--mantine-scale)) solid;
-      border-color: var(--mantine-color-gray-3);
+      border-color: var(--table-border-color);
       font-size: var(--mantine-font-size-sm);
     }
   .m_d6493fad :where(table) :where(tr:last-of-type td) {