@mantine/core 9.3.2 → 9.4.0

package/lib/components/PinInput/PinInput.d.ts

@@ -38,6 +38,8 @@ export interface PinInputProps extends BoxProps, StylesApiProps<PinInputFactory>
     disabled?: boolean;
     /** Sets `aria-invalid` attribute and applies error styles to all inputs */
     error?: boolean;
+    /** Applies success styles to all inputs */
+    success?: boolean;
     /** Determines which values can be entered @default 'alphanumeric' */
     type?: 'alphanumeric' | 'number' | RegExp;
     /** Changes input type to `"password"` @default false */

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

@@ -1,9 +1,11 @@
+import type { SplitterPaneSize } from '@mantine/hooks';
 import { GetStylesApi } from '../../core';
 import type { SplitterFactory } from './Splitter';
 export interface SplitterContextValue {
     getStyles: GetStylesApi<SplitterFactory>;
-    sizes: number[];
+    sizes: SplitterPaneSize[];
     collapsed: boolean[];
     orientation: 'horizontal' | 'vertical';
+    getPaneStyle: (index: number) => React.CSSProperties;
 }
 export declare const SplitterProvider: import("react").Context<SplitterContextValue | null>, useSplitterContext: () => SplitterContextValue;

package/lib/components/Splitter/Splitter.d.ts

@@ -1,4 +1,4 @@
-import { UseSplitterRedistributeFn, UseSplitterReturnValue } from '@mantine/hooks';
+import { SplitterPaneSize, SplitterStep, UseSplitterRedistributeFn, UseSplitterReturnValue } from '@mantine/hooks';
 import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
 import { SplitterPane, SplitterPaneStylesNames } from './SplitterPane/SplitterPane';
 export type SplitterStylesNames = 'root' | 'handle' | 'thumb' | SplitterPaneStylesNames;
@@ -8,22 +8,22 @@ export type SplitterCssVariables = {
 export interface SplitterProps extends BoxProps, StylesApiProps<SplitterFactory>, ElementProps<'div'> {
     /** Layout direction @default 'horizontal' */
     orientation?: 'horizontal' | 'vertical';
-    /** Controlled sizes (percentages summing to 100) */
-    sizes?: number[];
-    /** Called during resize with updated sizes */
-    onSizeChange?: (sizes: number[]) => void;
+    /** Controlled sizes, each value keeps the unit it was declared in (number/`%` flexible, `px`/`rem` fixed) */
+    sizes?: SplitterPaneSize[];
+    /** Called during resize with updated sizes, each value keeps its declared unit */
+    onSizeChange?: (sizes: SplitterPaneSize[]) => void;
     /** Called when drag starts */
     onResizeStart?: (handleIndex: number) => void;
     /** Called when drag ends */
-    onResizeEnd?: (handleIndex: number, sizes: number[]) => void;
+    onResizeEnd?: (handleIndex: number, sizes: SplitterPaneSize[]) => void;
     /** Called when a panel collapses or expands */
     onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;
     /** How to redistribute space when immediate neighbor is at its min/max */
     redistribute?: 'nearest' | 'equal' | UseSplitterRedistributeFn;
-    /** Keyboard step size in percentage @default 1 */
-    step?: number;
-    /** Shift+arrow step size in percentage @default 10 */
-    shiftStep?: number;
+    /** Keyboard step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels @default 1 */
+    step?: SplitterStep;
+    /** Shift+arrow step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels @default 10 */
+    shiftStep?: SplitterStep;
     /** CSS value for separator line thickness between panes @default 2 */
     lineSize?: number | string;
     /** Key of `theme.colors` or any valid CSS color for the separator line */

package/lib/components/Splitter/SplitterPane/SplitterPane.d.ts

@@ -1,16 +1,17 @@
+import type { SplitterPaneSize } from '@mantine/hooks';
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
 export type SplitterPaneStylesNames = 'pane';
 export interface SplitterPaneProps extends BoxProps, CompoundStylesApiProps<SplitterPaneFactory>, ElementProps<'div'> {
-    /** Initial size as percentage (0-100). All panes must sum to 100. */
-    defaultSize: number;
-    /** Minimum size percentage @default 0 */
-    min?: number;
-    /** Maximum size percentage @default 100 */
-    max?: number;
+    /** Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage. */
+    defaultSize: SplitterPaneSize;
+    /** Minimum size in the same units as `defaultSize` @default 0 */
+    min?: SplitterPaneSize;
+    /** Maximum size in the same units as `defaultSize`, no limit by default */
+    max?: SplitterPaneSize;
     /** Whether this pane can be collapsed @default false */
     collapsible?: boolean;
-    /** Size below which the pane snaps to collapsed (percentage), defaults to `min` */
-    collapseThreshold?: number;
+    /** Size below which the pane snaps to collapsed, defaults to `min` */
+    collapseThreshold?: SplitterPaneSize;
     /** Pane content */
     children?: React.ReactNode;
     /** @internal Index set by parent */

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

@@ -19,5 +19,7 @@ export interface TabsContextValue {
     placement: 'right' | 'left' | undefined;
     unstyled: boolean | undefined;
     getStyles: GetStylesApi<TabsFactory>;
+    mountedPanels: React.RefObject<Set<string>>;
+    setMountedPanel: (value: string, mounted: boolean) => void;
 }
 export declare const TabsProvider: import("react").Context<TabsContextValue | null>, useTabsContext: () => TabsContextValue;

package/lib/components/index.d.ts

@@ -39,11 +39,14 @@ export * from './ColorPicker';
 export * from './ColorInput';
 export * from './ColorSwatch';
 export * from './Combobox';
+export * from './ComboboxPopover';
 export * from './Container';
 export * from './CopyButton';
+export * from './DataList';
 export * from './Dialog';
 export * from './Divider';
 export * from './Drawer';
+export * from './EmptyState';
 export * from './Fieldset';
 export * from './FileButton';
 export * from './FileInput';
@@ -62,6 +65,7 @@ export * from './Mark';
 export * from './Marquee';
 export * from './MaskInput';
 export * from './Menu';
+export * from './Menubar';
 export * from './Modal';
 export * from './MultiSelect';
 export * from './NativeSelect';

package/lib/core/MantineProvider/color-functions/get-contrast-color/get-contrast-color.d.ts

@@ -1,9 +1,14 @@
-import type { MantineTheme } from '../../theme.types';
+import type { MantineColor, MantineColorScheme, MantineTheme } from '../../theme.types';
 interface GetContrastColorInput {
     color: string | null | undefined;
     theme: MantineTheme;
     autoContrast?: boolean | undefined | null;
+    colorScheme?: MantineColorScheme;
 }
-export declare function getContrastColor({ color, theme, autoContrast }: GetContrastColorInput): "var(--mantine-color-black)" | "var(--mantine-color-white)";
+export declare function getContrastColor({ color, theme, autoContrast, colorScheme, }: GetContrastColorInput): "var(--mantine-color-black)" | "var(--mantine-color-white)";
+export declare function getVirtualColorContrast(value: {
+    light: MantineColor;
+    dark: MantineColor;
+}, theme: MantineTheme, colorScheme: 'light' | 'dark'): "var(--mantine-color-black)" | "var(--mantine-color-white)";
 export declare function getPrimaryContrastColor(theme: MantineTheme, colorScheme: 'light' | 'dark'): "var(--mantine-color-black)" | "var(--mantine-color-white)";
 export {};

package/lib/core/MantineProvider/color-functions/index.d.ts

@@ -8,7 +8,7 @@ export { rgba, alpha } from './rgba/rgba';
 export { darken } from './darken/darken';
 export { lighten } from './lighten/lighten';
 export { luminance, isLightColor } from './luminance/luminance';
-export { getContrastColor, getPrimaryContrastColor } from './get-contrast-color/get-contrast-color';
+export { getContrastColor, getPrimaryContrastColor, getVirtualColorContrast, } from './get-contrast-color/get-contrast-color';
 export { getAutoContrastValue } from './get-auto-contrast-value/get-auto-contrast-value';
 export { colorsTuple } from './colors-tuple/colors-tuple';
 export type { RGBA } from './to-rgba/to-rgba';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.3.2",
+  "version": "9.4.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.3.2",
+    "@mantine/hooks": "9.4.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.6.0"
+    "type-fest": "^5.7.0"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.6",
-    "react-dom": "19.2.6"
+    "react": "19.2.7",
+    "react-dom": "19.2.7"
   }
 }

package/styles/DataList.css

@@ -0,0 +1,54 @@
+.m_f84d0407 {
+  --data-list-fz: var(--mantine-font-size-sm);
+  --data-list-lh: var(--mantine-line-height-sm);
+  --data-list-gap: var(--mantine-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--mantine-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  .m_f84d0407:where([data-with-divider]) {
+    gap: 0;
+  }
+
+.m_f848fe38 {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--mantine-spacing-xs);
+}
+
+.m_f84d0407:where([data-orientation='vertical']) > .m_f848fe38 {
+  flex-direction: column;
+  gap: 0;
+}
+
+.m_c791b39c {
+  color: var(--mantine-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+.m_f84d0407:where([data-orientation='vertical']) .m_c791b39c {
+  min-width: 100%;
+}
+
+.m_c81ec619 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+.m_f84d0407:where([data-with-divider]) > .m_f848fe38:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}

package/styles/DataList.layer.css

@@ -0,0 +1,55 @@
+@layer mantine {.m_f84d0407 {
+  --data-list-fz: var(--mantine-font-size-sm);
+  --data-list-lh: var(--mantine-line-height-sm);
+  --data-list-gap: var(--mantine-spacing-sm);
+  --data-list-label-width: calc(7.5rem * var(--mantine-scale));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--data-list-gap);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+  padding: 0;
+}
+
+  .m_f84d0407:where([data-with-divider]) {
+    gap: 0;
+  }
+
+.m_f848fe38 {
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--mantine-spacing-xs);
+}
+
+.m_f84d0407:where([data-orientation='vertical']) > .m_f848fe38 {
+  flex-direction: column;
+  gap: 0;
+}
+
+.m_c791b39c {
+  color: var(--mantine-color-dimmed);
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  min-width: var(--data-list-label-width);
+  margin: 0;
+}
+
+.m_f84d0407:where([data-orientation='vertical']) .m_c791b39c {
+  min-width: 100%;
+}
+
+.m_c81ec619 {
+  font-size: var(--data-list-fz);
+  line-height: var(--data-list-lh);
+  margin: 0;
+}
+
+.m_f84d0407:where([data-with-divider]) > .m_f848fe38:where(:not(:first-of-type)) {
+  border-top: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);
+  padding-top: var(--data-list-gap);
+  margin-top: var(--data-list-gap);
+}
+}

package/styles/EmptyState.css

@@ -0,0 +1,121 @@
+.m_7ffcadab {
+  --empty-state-indicator-size-xs: 32px;
+  --empty-state-indicator-size-sm: 40px;
+  --empty-state-indicator-size-md: 48px;
+  --empty-state-indicator-size-lg: 60px;
+  --empty-state-indicator-size-xl: 72px;
+
+  --empty-state-gap-xs: 6px;
+  --empty-state-gap-sm: 8px;
+  --empty-state-gap-md: 10px;
+  --empty-state-gap-lg: 12px;
+  --empty-state-gap-xl: 16px;
+
+  --empty-state-title-fz-xs: var(--mantine-font-size-sm);
+  --empty-state-title-fz-sm: var(--mantine-font-size-md);
+  --empty-state-title-fz-md: var(--mantine-font-size-lg);
+  --empty-state-title-fz-lg: var(--mantine-font-size-xl);
+  --empty-state-title-fz-xl: calc(var(--mantine-font-size-xl) * 1.2);
+
+  --empty-state-description-fz-xs: var(--mantine-font-size-xs);
+  --empty-state-description-fz-sm: var(--mantine-font-size-sm);
+  --empty-state-description-fz-md: var(--mantine-font-size-sm);
+  --empty-state-description-fz-lg: var(--mantine-font-size-md);
+  --empty-state-description-fz-xl: var(--mantine-font-size-lg);
+
+  display: flex;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+}
+
+  .m_7ffcadab[data-align='center'] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .m_7ffcadab[data-align='left'] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .m_7ffcadab[data-align='right'] {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+  }
+
+.m_7ff5666b {
+  display: flex;
+  flex-direction: column;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+  min-width: 0;
+}
+
+[data-align='center'] > .m_7ff5666b {
+    align-items: center;
+    text-align: center;
+  }
+
+[data-align='left'] > .m_7ff5666b {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+[data-align='right'] > .m_7ff5666b {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+.m_866226e6 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--empty-state-indicator-color, var(--mantine-color-dimmed));
+  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
+  line-height: 1;
+}
+
+.m_866226e6 > svg {
+    width: 1em;
+    height: 1em;
+  }
+
+[data-mantine-color-scheme='light'] .m_866226e6[data-with-background] {
+      --empty-state-indicator-default-bg: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme='dark'] .m_866226e6[data-with-background] {
+      --empty-state-indicator-default-bg: var(--mantine-color-dark-6);
+}
+
+.m_866226e6[data-with-background] {
+
+    width: 2em;
+    height: 2em;
+    border-radius: 1000px;
+    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));
+}
+
+.m_7fb28eaf {
+  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--mantine-color-bright);
+  margin: 0;
+  text-wrap: balance;
+}
+
+.m_5f111313 {
+  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));
+  line-height: 1.55;
+  color: var(--mantine-color-dimmed);
+  margin: 0;
+  max-width: 32rem;
+  text-wrap: pretty;
+}
+
+.m_65f4fb94 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mantine-spacing-sm);
+}

package/styles/EmptyState.layer.css

@@ -0,0 +1,122 @@
+@layer mantine {.m_7ffcadab {
+  --empty-state-indicator-size-xs: 32px;
+  --empty-state-indicator-size-sm: 40px;
+  --empty-state-indicator-size-md: 48px;
+  --empty-state-indicator-size-lg: 60px;
+  --empty-state-indicator-size-xl: 72px;
+
+  --empty-state-gap-xs: 6px;
+  --empty-state-gap-sm: 8px;
+  --empty-state-gap-md: 10px;
+  --empty-state-gap-lg: 12px;
+  --empty-state-gap-xl: 16px;
+
+  --empty-state-title-fz-xs: var(--mantine-font-size-sm);
+  --empty-state-title-fz-sm: var(--mantine-font-size-md);
+  --empty-state-title-fz-md: var(--mantine-font-size-lg);
+  --empty-state-title-fz-lg: var(--mantine-font-size-xl);
+  --empty-state-title-fz-xl: calc(var(--mantine-font-size-xl) * 1.2);
+
+  --empty-state-description-fz-xs: var(--mantine-font-size-xs);
+  --empty-state-description-fz-sm: var(--mantine-font-size-sm);
+  --empty-state-description-fz-md: var(--mantine-font-size-sm);
+  --empty-state-description-fz-lg: var(--mantine-font-size-md);
+  --empty-state-description-fz-xl: var(--mantine-font-size-lg);
+
+  display: flex;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+}
+
+  .m_7ffcadab[data-align='center'] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .m_7ffcadab[data-align='left'] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .m_7ffcadab[data-align='right'] {
+    flex-direction: row-reverse;
+    align-items: flex-start;
+  }
+
+.m_7ff5666b {
+  display: flex;
+  flex-direction: column;
+  gap: var(--empty-state-gap, var(--empty-state-gap-md));
+  min-width: 0;
+}
+
+[data-align='center'] > .m_7ff5666b {
+    align-items: center;
+    text-align: center;
+  }
+
+[data-align='left'] > .m_7ff5666b {
+    align-items: flex-start;
+    text-align: left;
+  }
+
+[data-align='right'] > .m_7ff5666b {
+    align-items: flex-end;
+    text-align: right;
+  }
+
+.m_866226e6 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--empty-state-indicator-color, var(--mantine-color-dimmed));
+  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));
+  line-height: 1;
+}
+
+.m_866226e6 > svg {
+    width: 1em;
+    height: 1em;
+  }
+
+[data-mantine-color-scheme='light'] .m_866226e6[data-with-background] {
+      --empty-state-indicator-default-bg: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme='dark'] .m_866226e6[data-with-background] {
+      --empty-state-indicator-default-bg: var(--mantine-color-dark-6);
+}
+
+.m_866226e6[data-with-background] {
+
+    width: 2em;
+    height: 2em;
+    border-radius: 1000px;
+    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));
+}
+
+.m_7fb28eaf {
+  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--mantine-color-bright);
+  margin: 0;
+  text-wrap: balance;
+}
+
+.m_5f111313 {
+  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));
+  line-height: 1.55;
+  color: var(--mantine-color-dimmed);
+  margin: 0;
+  max-width: 32rem;
+  text-wrap: pretty;
+}
+
+.m_65f4fb94 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--mantine-spacing-sm);
+}
+}

package/styles/Input.css

@@ -146,6 +146,15 @@
     --input-section-color: var(--mantine-color-error);
 }
 
+  [data-mantine-color-scheme] .m_6c018570[data-success]:not([data-variant='unstyled']) {
+      --input-bd: var(--mantine-color-success);
+    }
+
+  [data-mantine-color-scheme] .m_6c018570[data-success] {
+
+    --input-section-color: var(--mantine-color-success);
+}
+
   :where([dir="rtl"]) .m_6c018570 {
     --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
@@ -201,10 +210,14 @@
     --input-bd: var(--input-bd-focus);
   }
 
-[data-error] .m_8fb7ebe7:focus, [data-error] .m_8fb7ebe7:focus-within {
+.m_6c018570[data-error] .m_8fb7ebe7:focus, .m_6c018570[data-error] .m_8fb7ebe7:focus-within {
       --input-bd: var(--mantine-color-error);
     }
 
+.m_6c018570[data-success] .m_8fb7ebe7:focus, .m_6c018570[data-success] .m_8fb7ebe7:focus-within {
+      --input-bd: var(--mantine-color-success);
+    }
+
 .m_8fb7ebe7::placeholder {
     color: var(--input-placeholder-color);
     opacity: 1;
@@ -318,7 +331,7 @@
 .m_88bacfd0 {
   color: var(--input-placeholder-color, var(--mantine-color-placeholder));
 }
-[data-error] .m_88bacfd0 {
+.m_6c018570[data-error] .m_88bacfd0 {
     --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));
   }
 
@@ -341,6 +354,7 @@
 }
 
 .m_8f816625,
+.m_9d9d40e0,
 .m_fe47ce59 {
   word-wrap: break-word;
   line-height: 1.2;
@@ -354,6 +368,11 @@
   font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
 }
 
+.m_9d9d40e0 {
+  color: var(--mantine-color-success);
+  font-size: var(--input-success-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
+}
+
 .m_fe47ce59 {
   color: var(--mantine-color-dimmed);
   font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));

package/styles/Input.layer.css

@@ -146,6 +146,15 @@
     --input-section-color: var(--mantine-color-error);
 }
 
+  [data-mantine-color-scheme] .m_6c018570[data-success]:not([data-variant='unstyled']) {
+      --input-bd: var(--mantine-color-success);
+    }
+
+  [data-mantine-color-scheme] .m_6c018570[data-success] {
+
+    --input-section-color: var(--mantine-color-success);
+}
+
   :where([dir="rtl"]) .m_6c018570 {
     --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;
     --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);
@@ -201,10 +210,14 @@
     --input-bd: var(--input-bd-focus);
   }
 
-[data-error] .m_8fb7ebe7:focus, [data-error] .m_8fb7ebe7:focus-within {
+.m_6c018570[data-error] .m_8fb7ebe7:focus, .m_6c018570[data-error] .m_8fb7ebe7:focus-within {
       --input-bd: var(--mantine-color-error);
     }
 
+.m_6c018570[data-success] .m_8fb7ebe7:focus, .m_6c018570[data-success] .m_8fb7ebe7:focus-within {
+      --input-bd: var(--mantine-color-success);
+    }
+
 .m_8fb7ebe7::placeholder {
     color: var(--input-placeholder-color);
     opacity: 1;
@@ -318,7 +331,7 @@
 .m_88bacfd0 {
   color: var(--input-placeholder-color, var(--mantine-color-placeholder));
 }
-[data-error] .m_88bacfd0 {
+.m_6c018570[data-error] .m_88bacfd0 {
     --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));
   }
 
@@ -341,6 +354,7 @@
 }
 
 .m_8f816625,
+.m_9d9d40e0,
 .m_fe47ce59 {
   word-wrap: break-word;
   line-height: 1.2;
@@ -354,6 +368,11 @@
   font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
 }
 
+.m_9d9d40e0 {
+  color: var(--mantine-color-success);
+  font-size: var(--input-success-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));
+}
+
 .m_fe47ce59 {
   color: var(--mantine-color-dimmed);
   font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(0.125rem * var(--mantine-scale))));