@mantine/core 9.0.0-alpha.6 → 9.0.0

package/lib/components/Input/use-input-props.d.ts

@@ -8,7 +8,7 @@ interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
     __stylesApiProps?: Record<string, any>;
     id?: string;
 }
-export declare function useInputProps<T extends BaseProps, U extends Partial<T> | null>(component: string, defaultProps: U, _props: T): Omit<T & (U extends null | undefined ? {} : { [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>; }), "style" | "label" | "className" | "id" | "vars" | "mod" | "unstyled" | "variant" | "classNames" | "styles" | "attributes" | "size" | "required" | "description" | "error" | "wrapperProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "__staticSelector" | "__stylesApiProps"> & {
+export declare function useInputProps<T extends BaseProps, U extends Partial<T> | null>(component: string, defaultProps: U, _props: T): Omit<T & (U extends null | undefined ? {} : { [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>; }), "label" | "style" | "size" | "styles" | "className" | "id" | "vars" | "variant" | "unstyled" | "attributes" | "classNames" | "mod" | "description" | "error" | "__staticSelector" | "required" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
     classNames: Partial<Record<string, string>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
     styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;
@@ -23,17 +23,17 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
         autoFocus?: boolean | undefined;
         className: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
+        draggable?: (boolean | "false" | "true") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
         hidden?: boolean | undefined;
         id: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
         slot?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
+        spellCheck?: (boolean | "false" | "true") | undefined;
         style: import("react").CSSProperties | ((theme: import("../..").MantineTheme) => import("../..").CSSProperties) | import("../..").MantineStyleProp[] | undefined;
         tabIndex?: number | undefined;
         title?: string | undefined;
@@ -71,11 +71,11 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         exportparts?: string | undefined;
         part?: string | undefined;
         "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-atomic"?: (boolean | "false" | "true") | undefined;
         "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
         "aria-braillelabel"?: string | undefined;
         "aria-brailleroledescription"?: string | undefined;
-        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-busy"?: (boolean | "false" | "true") | undefined;
         "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
@@ -86,37 +86,37 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         "aria-describedby"?: string | undefined;
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
-        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-disabled"?: (boolean | "false" | "true") | undefined;
         "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-expanded"?: (boolean | "false" | "true") | undefined;
         "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
         "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-hidden"?: (boolean | "false" | "true") | undefined;
         "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         "aria-keyshortcuts"?: string | undefined;
         "aria-label"?: string | undefined;
         "aria-labelledby"?: string | undefined;
         "aria-level"?: number | undefined;
         "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: (boolean | "true" | "false") | undefined;
-        "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-modal"?: (boolean | "false" | "true") | undefined;
+        "aria-multiline"?: (boolean | "false" | "true") | undefined;
+        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
         "aria-orientation"?: "horizontal" | "vertical" | undefined;
         "aria-owns"?: string | undefined;
         "aria-placeholder"?: string | undefined;
         "aria-posinset"?: number | undefined;
         "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-readonly"?: (boolean | "false" | "true") | undefined;
         "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-required"?: (boolean | "false" | "true") | undefined;
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
         "aria-rowindex"?: number | undefined;
         "aria-rowindextext"?: string | undefined;
         "aria-rowspan"?: number | undefined;
-        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-selected"?: (boolean | "false" | "true") | undefined;
         "aria-setsize"?: number | undefined;
         "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
         "aria-valuemax"?: number | undefined;
@@ -307,7 +307,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         descriptionProps: (import(".").InputDescriptionProps & import("../..").DataAttributes) | undefined;
         unstyled: boolean | undefined;
         styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
-        size: import("../..").MantineSize | (string & {}) | undefined;
+        size: (string & {}) | import("../..").MantineSize | undefined;
         inputContainer: ((children: React.ReactNode) => React.ReactNode) | undefined;
         inputWrapperOrder: ("input" | "label" | "description" | "error")[] | undefined;
         withAsterisk: boolean | undefined;
@@ -322,7 +322,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         classNames: Partial<Record<string, string>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
         styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
         unstyled: boolean | undefined;
-        size: import("../..").MantineSize | (string & {}) | undefined;
+        size: (string & {}) | import("../..").MantineSize | undefined;
         __staticSelector: string | undefined;
         __stylesApiProps: Record<string, any> | BaseProps;
         error: import("react").ReactNode;

package/lib/components/Popover/use-popover.d.ts

@@ -43,10 +43,10 @@ export declare function usePopover(options: UsePopoverOptions): {
             floating: HTMLElement | null;
         } & import("@floating-ui/react").ExtendedElements<Element>;
         context: {
-            strategy: import("@floating-ui/utils").Strategy;
-            placement: import("@floating-ui/utils").Placement;
             x: number;
             y: number;
+            placement: import("@floating-ui/utils").Placement;
+            strategy: import("@floating-ui/utils").Strategy;
             middlewareData: import("@floating-ui/core").MiddlewareData;
             isPositioned: boolean;
             update: () => void;

package/lib/components/Stepper/Stepper.d.ts

@@ -4,7 +4,7 @@ import { StepperStep } from './StepperStep/StepperStep';
 export type StepFragmentComponent = React.FC<{
     step: number;
 }>;
-export type StepperStylesNames = 'root' | 'separator' | 'steps' | 'content' | 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepBody' | 'stepLabel' | 'stepDescription';
+export type StepperStylesNames = 'root' | 'separator' | 'steps' | 'content' | 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepIconContent' | 'stepBody' | 'stepLabel' | 'stepDescription';
 export type StepperCssVariables = {
     root: '--stepper-color' | '--stepper-icon-color' | '--stepper-icon-size' | '--stepper-content-padding' | '--stepper-radius' | '--stepper-fz' | '--stepper-spacing';
 };

package/lib/components/Stepper/StepperStep/StepperStep.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
 import type { StepFragmentComponent } from '../Stepper';
-export type StepperStepStylesNames = 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepBody' | 'stepLabel' | 'stepDescription';
+export type StepperStepStylesNames = 'step' | 'stepLoader' | 'verticalSeparator' | 'stepWrapper' | 'stepIcon' | 'stepCompletedIcon' | 'stepIconContent' | 'stepBody' | 'stepLabel' | 'stepDescription';
 export interface StepperStepProps extends BoxProps, CompoundStylesApiProps<StepperStepFactory>, ElementProps<'button'> {
     /** 0-based step index, automatically set by Stepper component */
     step?: number;

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

@@ -4,6 +4,6 @@ interface GetContrastColorInput {
     theme: MantineTheme;
     autoContrast?: boolean | undefined | null;
 }
-export declare function getContrastColor({ color, theme, autoContrast }: GetContrastColorInput): "var(--mantine-color-white)" | "var(--mantine-color-black)";
-export declare function getPrimaryContrastColor(theme: MantineTheme, colorScheme: 'light' | 'dark'): "var(--mantine-color-white)" | "var(--mantine-color-black)";
+export declare function getContrastColor({ color, theme, autoContrast }: GetContrastColorInput): "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.0.0-alpha.6",
+  "version": "9.0.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,16 +43,16 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.0.0-alpha.6",
+    "@mantine/hooks": "9.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "clsx": "^2.1.1",
-    "react-number-format": "^5.4.4",
+    "react-number-format": "^5.4.5",
     "react-remove-scroll": "^2.7.2",
-    "type-fest": "^4.41.0"
+    "type-fest": "^5.5.0"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",

package/styles/Badge.css

@@ -107,6 +107,8 @@
   text-overflow: ellipsis;
   text-align: center;
   cursor: inherit;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_91fdda9b {

package/styles/Badge.layer.css

@@ -107,6 +107,8 @@
   text-overflow: ellipsis;
   text-align: center;
   cursor: inherit;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_91fdda9b {

package/styles/Button.css

@@ -137,6 +137,8 @@
   display: flex;
   align-items: center;
   opacity: 1;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_811560b9:where([data-loading]) {

package/styles/Button.layer.css

@@ -137,6 +137,8 @@
   display: flex;
   align-items: center;
   opacity: 1;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_811560b9:where([data-loading]) {

package/styles/Chip.css

@@ -54,6 +54,8 @@
   -webkit-tap-highlight-color: transparent;
   border: 1px solid transparent;
   color: var(--mantine-color-text);
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_be049a53:where([data-checked]) {

package/styles/Chip.layer.css

@@ -54,6 +54,8 @@
   -webkit-tap-highlight-color: transparent;
   border: 1px solid transparent;
   color: var(--mantine-color-text);
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_be049a53:where([data-checked]) {

package/styles/Pill.css

@@ -64,9 +64,12 @@
 .m_1e0e6180 {
   cursor: inherit;
   overflow: hidden;
-  height: 100%;
-  line-height: var(--pill-height);
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_ae386778 {

package/styles/Pill.layer.css

@@ -64,9 +64,12 @@
 .m_1e0e6180 {
   cursor: inherit;
   overflow: hidden;
-  height: 100%;
-  line-height: var(--pill-height);
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_ae386778 {

package/styles/SegmentedControl.css

@@ -45,7 +45,7 @@
   position: absolute;
   display: block;
   z-index: 1;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_9e182ccd {
@@ -67,7 +67,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
   font-size: var(--sc-font-size);
   padding: var(--sc-padding);
   transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);
@@ -112,7 +112,7 @@ fieldset:disabled .m_1738fcb2,
       inset: 0;
       z-index: 0;
       position: absolute;
-      border-radius: var(--sc-radius, var(--mantine-radius-default));
+      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active])::before {

package/styles/SegmentedControl.layer.css

@@ -45,7 +45,7 @@
   position: absolute;
   display: block;
   z-index: 1;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_9e182ccd {
@@ -67,7 +67,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
   font-size: var(--sc-font-size);
   padding: var(--sc-padding);
   transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);
@@ -112,7 +112,7 @@ fieldset:disabled .m_1738fcb2,
       inset: 0;
       z-index: 0;
       position: absolute;
-      border-radius: var(--sc-radius, var(--mantine-radius-default));
+      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active])::before {

package/styles/Stepper.css

@@ -162,6 +162,10 @@
     border-color: var(--step-color);
   }
 
+.m_8faaac38 {
+  display: flex;
+}
+
 .m_a79331dc {
   position: absolute;
   inset: 0;

package/styles/Stepper.layer.css

@@ -162,6 +162,10 @@
     border-color: var(--step-color);
   }
 
+.m_8faaac38 {
+  display: flex;
+}
+
 .m_a79331dc {
   position: absolute;
   inset: 0;

package/styles/default-css-variables.css

@@ -23,7 +23,7 @@
     Apple Color Emoji, Segoe UI Emoji;
   --mantine-heading-font-weight: 700;
   --mantine-heading-text-wrap: wrap;
-  --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
+  --mantine-radius-default: calc(0.5rem * var(--mantine-scale));
   --mantine-primary-color-filled: var(--mantine-color-blue-filled);
   --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);
   --mantine-primary-color-light: var(--mantine-color-blue-light);

package/styles/default-css-variables.layer.css

@@ -23,7 +23,7 @@
     Apple Color Emoji, Segoe UI Emoji;
   --mantine-heading-font-weight: 700;
   --mantine-heading-text-wrap: wrap;
-  --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
+  --mantine-radius-default: calc(0.5rem * var(--mantine-scale));
   --mantine-primary-color-filled: var(--mantine-color-blue-filled);
   --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);
   --mantine-primary-color-light: var(--mantine-color-blue-light);

package/styles.css

@@ -108,7 +108,7 @@ fieldset:disabled .mantine-active:active {
     Apple Color Emoji, Segoe UI Emoji;
   --mantine-heading-font-weight: 700;
   --mantine-heading-text-wrap: wrap;
-  --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
+  --mantine-radius-default: calc(0.5rem * var(--mantine-scale));
   --mantine-primary-color-filled: var(--mantine-color-blue-filled);
   --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);
   --mantine-primary-color-light: var(--mantine-color-blue-light);
@@ -3117,6 +3117,8 @@ fieldset:disabled .m_8ee546b8,
   text-overflow: ellipsis;
   text-align: center;
   cursor: inherit;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_91fdda9b {
@@ -3414,6 +3416,8 @@ fieldset:disabled .m_8ee546b8,
   display: flex;
   align-items: center;
   opacity: 1;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_811560b9:where([data-loading]) {
@@ -3693,6 +3697,8 @@ fieldset:disabled .m_8ee546b8,
   -webkit-tap-highlight-color: transparent;
   border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
   color: var(--mantine-color-text);
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_be049a53:where([data-checked]) {
@@ -4909,9 +4915,12 @@ fieldset:disabled .m_8ee546b8,
 .m_1e0e6180 {
   cursor: inherit;
   overflow: hidden;
-  height: 100%;
-  line-height: var(--pill-height);
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_ae386778 {
@@ -6184,7 +6193,7 @@ fieldset:disabled .m_8ee546b8,
   position: absolute;
   display: block;
   z-index: 1;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_9e182ccd {
@@ -6206,7 +6215,7 @@ fieldset:disabled .m_8ee546b8,
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
   font-size: var(--sc-font-size);
   padding: var(--sc-padding);
   transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);
@@ -6251,7 +6260,7 @@ fieldset:disabled .m_1738fcb2,
       inset: 0;
       z-index: 0;
       position: absolute;
-      border-radius: var(--sc-radius, var(--mantine-radius-default));
+      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active])::before {
@@ -6963,6 +6972,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     border-color: var(--step-color);
   }
 
+.m_8faaac38 {
+  display: flex;
+}
+
 .m_a79331dc {
   position: absolute;
   inset: 0;

package/styles.layer.css

@@ -108,7 +108,7 @@ fieldset:disabled .mantine-active:active {
     Apple Color Emoji, Segoe UI Emoji;
   --mantine-heading-font-weight: 700;
   --mantine-heading-text-wrap: wrap;
-  --mantine-radius-default: calc(0.25rem * var(--mantine-scale));
+  --mantine-radius-default: calc(0.5rem * var(--mantine-scale));
   --mantine-primary-color-filled: var(--mantine-color-blue-filled);
   --mantine-primary-color-filled-hover: var(--mantine-color-blue-filled-hover);
   --mantine-primary-color-light: var(--mantine-color-blue-light);
@@ -3117,6 +3117,8 @@ fieldset:disabled .m_8ee546b8,
   text-overflow: ellipsis;
   text-align: center;
   cursor: inherit;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_91fdda9b {
@@ -3414,6 +3416,8 @@ fieldset:disabled .m_8ee546b8,
   display: flex;
   align-items: center;
   opacity: 1;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_811560b9:where([data-loading]) {
@@ -3693,6 +3697,8 @@ fieldset:disabled .m_8ee546b8,
   -webkit-tap-highlight-color: transparent;
   border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
   color: var(--mantine-color-text);
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_be049a53:where([data-checked]) {
@@ -4909,9 +4915,12 @@ fieldset:disabled .m_8ee546b8,
 .m_1e0e6180 {
   cursor: inherit;
   overflow: hidden;
-  height: 100%;
-  line-height: var(--pill-height);
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
 }
 
 .m_ae386778 {
@@ -6184,7 +6193,7 @@ fieldset:disabled .m_8ee546b8,
   position: absolute;
   display: block;
   z-index: 1;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_9e182ccd {
@@ -6206,7 +6215,7 @@ fieldset:disabled .m_8ee546b8,
   overflow: hidden;
   text-overflow: ellipsis;
   user-select: none;
-  border-radius: var(--sc-radius, var(--mantine-radius-default));
+  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
   font-size: var(--sc-font-size);
   padding: var(--sc-padding);
   transition: color var(--sc-transition-duration) var(--sc-transition-timing-function);
@@ -6251,7 +6260,7 @@ fieldset:disabled .m_1738fcb2,
       inset: 0;
       z-index: 0;
       position: absolute;
-      border-radius: var(--sc-radius, var(--mantine-radius-default));
+      border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
 }
 
 :where([data-mantine-color-scheme='light']) .m_1738fcb2:where([data-active])::before {
@@ -6963,6 +6972,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     border-color: var(--step-color);
   }
 
+.m_8faaac38 {
+  display: flex;
+}
+
 .m_a79331dc {
   position: absolute;
   inset: 0;

package/cjs/components/MaskInput/MaskInput.cjs

@@ -1,24 +0,0 @@
-"use client";
-require("../../_virtual/_rolldown/runtime.cjs");
-const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
-const require_factory = require("../../core/factory/factory.cjs");
-const require_InputBase = require("../InputBase/InputBase.cjs");
-const require_use_mask_input_props = require("./use-mask-input-props.cjs");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region packages/@mantine/core/src/components/MaskInput/MaskInput.tsx
-const defaultProps = {};
-const MaskInput = require_factory.factory((props) => {
-	const { maskRef, elementProps } = require_use_mask_input_props.useMaskInputProps(require_use_props.useProps("MaskInput", defaultProps, props));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
-		component: "input",
-		ref: maskRef,
-		...elementProps,
-		__staticSelector: "MaskInput"
-	});
-});
-MaskInput.classes = require_InputBase.InputBase.classes;
-MaskInput.displayName = "@mantine/core/MaskInput";
-//#endregion
-exports.MaskInput = MaskInput;
-
-//# sourceMappingURL=MaskInput.cjs.map

package/cjs/components/MaskInput/MaskInput.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"MaskInput.cjs","names":["factory","useMaskInputProps","useProps","InputBase"],"sources":["../../../src/components/MaskInput/MaskInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { useMaskInputProps } from './use-mask-input-props';\n\nexport interface MaskInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<MaskInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** Mask pattern string or array of string literals and RegExp objects */\n  mask: string | Array<string | RegExp>;\n\n  /** Override or extend the default token map */\n  tokens?: Record<string, RegExp>;\n\n  /** Called before masking on each keystroke, can return overrides for mask options */\n  modify?: (\n    value: string\n  ) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;\n\n  /** When true, raw and display values are decoupled */\n  separate?: boolean;\n\n  /** Character displayed in unfilled slots, `\"_\"` by default */\n  slotChar?: string | null;\n\n  /** Show mask pattern even when field is empty and unfocused */\n  alwaysShowMask?: boolean;\n\n  /** Show mask placeholder on focus, `true` by default */\n  showMaskOnFocus?: boolean;\n\n  /** Transform each character before validation and insertion */\n  transform?: (char: string) => string;\n\n  /** Clear value on blur when mask is incomplete, `false` by default */\n  autoClear?: boolean;\n\n  /** Called on every change with raw and masked values */\n  onChangeRaw?: (rawValue: string, maskedValue: string) => void;\n\n  /** Called when all required mask slots are filled */\n  onComplete?: (maskedValue: string, rawValue: string) => void;\n\n  /** Escape hatch for advanced cursor/value manipulation */\n  beforeMaskedStateChange?: (states: {\n    previousState: { value: string; selection: { start: number; end: number } | null };\n    currentState: { value: string; selection: { start: number; end: number } | null };\n    nextState: { value: string; selection: { start: number; end: number } | null };\n  }) => { value: string; selection: { start: number; end: number } | null };\n}\n\nexport type MaskInputFactory = Factory<{\n  props: MaskInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<MaskInputProps>;\n\nexport const MaskInput = factory<MaskInputFactory>((props) => {\n  const _props = useProps('MaskInput', defaultProps, props);\n  const { maskRef, elementProps } = useMaskInputProps(_props);\n\n  return (\n    <InputBase\n      component=\"input\"\n      ref={maskRef}\n      {...(elementProps as any)}\n      __staticSelector=\"MaskInput\"\n    />\n  );\n});\n\nMaskInput.classes = InputBase.classes;\nMaskInput.displayName = '@mantine/core/MaskInput';\n"],"mappings":";;;;;;;;AA6DA,MAAM,eAAe,EAAE;AAEvB,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAE5D,MAAM,EAAE,SAAS,iBAAiBC,6BAAAA,kBADnBC,kBAAAA,SAAS,aAAa,cAAc,MAAM,CACE;AAE3D,QACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EACE,WAAU;EACV,KAAK;EACL,GAAK;EACL,kBAAiB;EACjB,CAAA;EAEJ;AAEF,UAAU,UAAUA,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}

package/cjs/components/MaskInput/use-mask-input-props.cjs

@@ -1,29 +0,0 @@
-"use client";
-require("../../_virtual/_rolldown/runtime.cjs");
-let _mantine_hooks = require("@mantine/hooks");
-//#region packages/@mantine/core/src/components/MaskInput/use-mask-input-props.ts
-function useMaskInputProps(props) {
-	const { mask, tokens, modify, separate, slotChar, alwaysShowMask, showMaskOnFocus, transform, autoClear, onChangeRaw, onComplete, beforeMaskedStateChange, ref, ...elementProps } = props;
-	const { ref: maskCallbackRef } = (0, _mantine_hooks.useMask)({
-		mask,
-		tokens,
-		modify,
-		separate,
-		slotChar,
-		alwaysShowMask,
-		showMaskOnFocus,
-		transform,
-		autoClear,
-		onChangeRaw,
-		onComplete,
-		beforeMaskedStateChange
-	});
-	return {
-		maskRef: (0, _mantine_hooks.useMergedRef)(ref, maskCallbackRef),
-		elementProps
-	};
-}
-//#endregion
-exports.useMaskInputProps = useMaskInputProps;
-
-//# sourceMappingURL=use-mask-input-props.cjs.map

package/cjs/components/MaskInput/use-mask-input-props.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-mask-input-props.cjs","names":[],"sources":["../../../src/components/MaskInput/use-mask-input-props.ts"],"sourcesContent":["import { useMask, useMergedRef } from '@mantine/hooks';\nimport type { MaskInputProps } from './MaskInput';\n\nexport function useMaskInputProps(props: MaskInputProps & { ref?: React.Ref<HTMLInputElement> }) {\n  const {\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n    ref,\n    ...elementProps\n  } = props;\n\n  const { ref: maskCallbackRef } = useMask({\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n  });\n\n  const maskRef = useMergedRef(ref, maskCallbackRef);\n\n  return { maskRef, elementProps };\n}\n"],"mappings":";;;;AAGA,SAAgB,kBAAkB,OAA+D;CAC/F,MAAM,EACJ,MACA,QACA,QACA,UACA,UACA,gBACA,iBACA,WACA,WACA,aACA,YACA,yBACA,KACA,GAAG,iBACD;CAEJ,MAAM,EAAE,KAAK,qBAAA,GAAA,eAAA,SAA4B;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAIF,QAAO;EAAE,UAAA,GAAA,eAAA,cAFoB,KAAK,gBAAgB;EAEhC;EAAc"}