@mantine/core 7.16.3 → 8.0.0-alpha.0

package/lib/components/Popover/Popover.d.ts

@@ -19,6 +19,8 @@ export interface __PopoverProps {
     positionDependencies?: any[];
     /** Called when dropdown closes */
     onClose?: () => void;
+    /** Called when the popover is dismissed by clicking outside or by pressing escape */
+    onDismiss?: () => void;
     /** Called when dropdown opens */
     onOpen?: () => void;
     /** If set dropdown will not be unmounted from the DOM when it is hidden, `display: none` styles will be added instead */
@@ -63,6 +65,8 @@ export interface __PopoverProps {
     returnFocus?: boolean;
     /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy), `'absolute'` by default */
     floatingStrategy?: FloatingStrategy;
+    /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen, `true` by default */
+    hideDetached?: boolean;
 }
 export interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {
     __staticSelector?: string;

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

@@ -9,6 +9,7 @@ interface UsePopoverOptions {
     defaultOpened: boolean | undefined;
     onChange?: (opened: boolean) => void;
     onClose?: () => void;
+    onDismiss?: () => void;
     onOpen?: () => void;
     width: PopoverWidth;
     middlewares: PopoverMiddlewares | undefined;

package/lib/components/Portal/OptionalPortal.d.ts

@@ -1,9 +1,14 @@
+import { Factory } from '../../core';
 import { PortalProps } from './Portal';
 export interface OptionalPortalProps extends PortalProps {
     /** Determines whether children should be rendered inside `<Portal />` */
     withinPortal?: boolean;
 }
-export declare function OptionalPortal({ withinPortal, children, ...others }: OptionalPortalProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace OptionalPortal {
-    var displayName: string;
-}
+export type OptionalPortalFactory = Factory<{
+    props: OptionalPortalProps;
+    ref: HTMLDivElement;
+}>;
+export declare const OptionalPortal: import("../../core").MantineComponent<{
+    props: OptionalPortalProps;
+    ref: HTMLDivElement;
+}>;

package/lib/components/Portal/Portal.d.ts

@@ -1,7 +1,17 @@
+import { Factory } from '../../core';
 export interface PortalProps extends React.ComponentPropsWithoutRef<'div'> {
     /** Portal children, for example, custom modal or popover */
     children: React.ReactNode;
     /** Element inside which portal should be created, by default a new div element is created and appended to the `document.body` */
     target?: HTMLElement | string;
+    /** If set, all portals are rendered in the same DOM node, `true` by default */
+    reuseTargetNode?: boolean;
 }
-export declare const Portal: import("react").ForwardRefExoticComponent<PortalProps & import("react").RefAttributes<HTMLDivElement>>;
+export type PortalFactory = Factory<{
+    props: PortalProps;
+    ref: HTMLDivElement;
+}>;
+export declare const Portal: import("../../core").MantineComponent<{
+    props: PortalProps;
+    ref: HTMLDivElement;
+}>;

package/lib/components/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
+import { BoxProps, DataAttributes, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 import { InlineInputStylesNames } from '../InlineInput';
 import { RadioCard } from './RadioCard/RadioCard';
 import { RadioGroup } from './RadioGroup/RadioGroup';
@@ -19,7 +19,7 @@ export interface RadioProps extends BoxProps, StylesApiProps<RadioFactory>, Elem
     /** A component that replaces default check icon */
     icon?: React.FC<RadioIconProps>;
     /** Props passed down to the root element */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
     /** Position of the label relative to the input, `'right'` by default */
     labelPosition?: 'left' | 'right';
     /** Description displayed below the label */

package/lib/components/Radio/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import { Factory, MantineSize } from '../../../core';
+import { DataAttributes, Factory, MantineSize } from '../../../core';
 import { InputWrapperProps, InputWrapperStylesNames } from '../../Input';
 export type RadioGroupStylesNames = InputWrapperStylesNames;
 export interface RadioGroupProps extends Omit<InputWrapperProps, 'onChange' | 'value' | 'defaultValue'> {
@@ -11,7 +11,7 @@ export interface RadioGroupProps extends Omit<InputWrapperProps, 'onChange' | 'v
     /** Called when value changes */
     onChange?: (value: string) => void;
     /** Props passed down to the `Input.Wrapper` */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
     /** Controls size of the `Input.Wrapper`, `'sm'` by default */
     size?: MantineSize;
     /** `name` attribute of child radio inputs. By default, `name` is generated randomly. */

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

@@ -1,3 +1,5 @@
+import { GetStylesApi } from '../../core';
+import type { ScrollAreaFactory } from './ScrollArea';
 export interface ScrollAreaContextValue {
     type: 'auto' | 'always' | 'scroll' | 'hover' | 'never';
     scrollHideDelay: number;
@@ -16,6 +18,7 @@ export interface ScrollAreaContextValue {
     onScrollbarYEnabledChange: (rendered: boolean) => void;
     onCornerWidthChange: (width: number) => void;
     onCornerHeightChange: (height: number) => void;
+    getStyles: GetStylesApi<ScrollAreaFactory>;
 }
 export declare const ScrollAreaProvider: ({ children, value }: {
     value: ScrollAreaContextValue;

package/lib/components/ScrollArea/ScrollArea.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
-export type ScrollAreaStylesNames = 'root' | 'viewport' | 'scrollbar' | 'thumb' | 'corner';
+export type ScrollAreaStylesNames = 'root' | 'viewport' | 'scrollbar' | 'thumb' | 'corner' | 'content';
 export type ScrollAreaCssVariables = {
     root: '--scrollarea-scrollbar-size';
 };
@@ -34,6 +34,8 @@ export interface ScrollAreaProps extends BoxProps, StylesApiProps<ScrollAreaFact
     onBottomReached?: () => void;
     /** Called when scrollarea is scrolled all the way to the top */
     onTopReached?: () => void;
+    /** Defines `overscroll-behavior` of the viewport */
+    overscrollBehavior?: React.CSSProperties['overscrollBehavior'];
 }
 export interface ScrollAreaAutosizeProps extends ScrollAreaProps {
 }

package/lib/components/ScrollArea/ScrollAreaRoot/ScrollAreaRoot.d.ts

@@ -1,4 +1,5 @@
-import { BoxProps, ElementProps, Factory } from '../../../core';
+import { BoxProps, ElementProps, Factory, GetStylesApi } from '../../../core';
+import type { ScrollAreaFactory } from '../ScrollArea';
 export type ScrollAreaRootStylesNames = 'root' | 'viewport' | 'viewportInner' | 'scrollbar' | 'thumb' | 'corner';
 export type ScrollAreaRootCssVariables = {
     root: '--sa-corner-width' | '--sa-corner-height';
@@ -8,18 +9,9 @@ export interface ScrollAreaRootStylesCtx {
     cornerHeight: number;
 }
 export interface ScrollAreaRootProps extends BoxProps, ElementProps<'div'> {
-    /**
-     * Defines scrollbars behavior, `hover` by default
-     * - `hover` – scrollbars are visible when mouse is over the scroll area
-     * - `scroll` – scrollbars are visible when the scroll area is scrolled
-     * - `always` – scrollbars are always visible
-     * - `never` – scrollbars are always hidden
-     * - `auto` – similar to `overflow: auto` – scrollbars are always visible when the content is overflowing
-     * */
+    getStyles: GetStylesApi<ScrollAreaFactory>;
     type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';
-    /** Axis at which scrollbars must be rendered, `'xy'` by default */
     scrollbars?: 'x' | 'y' | 'xy' | false;
-    /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll`, `1000` by default */
     scrollHideDelay?: number;
 }
 export type ScrollAreaRootFactory = Factory<{

package/lib/components/Switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
+import { BoxProps, DataAttributes, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
 import { InlineInputStylesNames } from '../InlineInput';
 import { SwitchGroup } from './SwitchGroup/SwitchGroup';
 export type SwitchStylesNames = 'root' | 'track' | 'trackLabel' | 'thumb' | 'input' | InlineInputStylesNames;
@@ -21,7 +21,7 @@ export interface SwitchProps extends BoxProps, StylesApiProps<SwitchFactory>, El
     /** Key of `theme.radius` or any valid CSS value to set `border-radius,` "xl" by default */
     radius?: MantineRadius;
     /** Props passed down to the root element */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
     /** Icon inside the thumb of the switch */
     thumbIcon?: React.ReactNode;
     /** Position of the label relative to the input, `'right'` by default */
@@ -32,6 +32,8 @@ export interface SwitchProps extends BoxProps, StylesApiProps<SwitchFactory>, El
     error?: React.ReactNode;
     /** Assigns ref of the root element */
     rootRef?: React.ForwardedRef<HTMLDivElement>;
+    /** If set, the indicator will be displayed inside thumb, `true` by default */
+    withThumbIndicator?: boolean;
 }
 export type SwitchFactory = Factory<{
     props: SwitchProps;

package/lib/components/Switch/SwitchGroup/SwitchGroup.d.ts

@@ -1,4 +1,4 @@
-import { Factory, MantineSize } from '../../../core';
+import { DataAttributes, Factory, MantineSize } from '../../../core';
 import { InputWrapperProps, InputWrapperStylesNames } from '../../Input';
 export type SwitchGroupStylesNames = InputWrapperStylesNames;
 export interface SwitchGroupProps extends Omit<InputWrapperProps, 'onChange'> {
@@ -11,7 +11,7 @@ export interface SwitchGroupProps extends Omit<InputWrapperProps, 'onChange'> {
     /** Called when value changes */
     onChange?: (value: string[]) => void;
     /** Props passed down to the `Input.Wrapper` */
-    wrapperProps?: Record<string, any>;
+    wrapperProps?: React.ComponentPropsWithoutRef<'div'> & DataAttributes;
     /** Controls size of the `Input.Wrapper`, `'sm'` by default */
     size?: MantineSize | (string & {});
     /** If set, value cannot be changed */

package/lib/core/MantineProvider/Mantine.context.d.ts

@@ -16,6 +16,7 @@ interface MantineContextValue {
     withStaticClasses: boolean;
     headless?: boolean;
     stylesTransform?: MantineStylesTransform;
+    env?: 'default' | 'test';
 }
 export declare const MantineContext: import("react").Context<MantineContextValue | null>;
 export declare function useMantineContext(): MantineContextValue;
@@ -26,4 +27,5 @@ export declare function useMantineWithStaticClasses(): boolean;
 export declare function useMantineIsHeadless(): boolean | undefined;
 export declare function useMantineSxTransform(): (() => (sx: any) => string) | undefined;
 export declare function useMantineStylesTransform(): (() => (styles: any, payload: any) => Record<string, string>) | undefined;
+export declare function useMantineEnv(): "default" | "test";
 export {};

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

@@ -1,4 +1,6 @@
+import './baseline.css';
 import './global.css';
+import './default-css-variables.css';
 import { MantineColorSchemeManager } from './color-scheme-managers';
 import { MantineStylesTransform } from './Mantine.context';
 import { CSSVariablesResolver } from './MantineCssVariables';
@@ -34,8 +36,10 @@ export interface MantineProviderProps {
     stylesTransform?: MantineStylesTransform;
     /** Your application */
     children?: React.ReactNode;
+    /** Environment at which the provider is used, `'test'` environment disables all transitions and portals */
+    env?: 'default' | 'test';
 }
-export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, stylesTransform, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, stylesTransform, env, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MantineProvider {
     var displayName: string;
 }

package/lib/core/MantineProvider/index.d.ts

@@ -6,7 +6,7 @@ export * from './ColorSchemeScript';
 export { DEFAULT_THEME } from './default-theme';
 export { validateMantineTheme, mergeMantineTheme } from './merge-mantine-theme';
 export { MantineProvider, HeadlessMantineProvider } from './MantineProvider';
-export { MantineContext, useMantineContext, useMantineClassNamesPrefix, useMantineStyleNonce, useMantineCssVariablesResolver, useMantineWithStaticClasses, useMantineIsHeadless, useMantineSxTransform, useMantineStylesTransform, } from './Mantine.context';
+export { MantineContext, useMantineContext, useMantineClassNamesPrefix, useMantineStyleNonce, useMantineCssVariablesResolver, useMantineWithStaticClasses, useMantineIsHeadless, useMantineSxTransform, useMantineStylesTransform, useMantineEnv, } from './Mantine.context';
 export { useMantineTheme, useSafeMantineTheme, MantineThemeContext, MantineThemeProvider, } from './MantineThemeProvider';
 export type { MantineThemeProviderProps } from './MantineThemeProvider';
 export type { MantineProviderProps, HeadlessMantineProviderProps } from './MantineProvider';

package/lib/core/MantineProvider/use-mantine-color-scheme/use-computed-color-scheme.d.ts

@@ -1,2 +1,2 @@
 import { UseMediaQueryOptions } from '@mantine/hooks';
-export declare function useComputedColorScheme(defaultValue?: 'light' | 'dark', options?: UseMediaQueryOptions): "light" | "dark";
+export declare function useComputedColorScheme(defaultValue?: 'light' | 'dark', options?: UseMediaQueryOptions): "dark" | "light";

package/lib/core/index.d.ts

@@ -5,3 +5,4 @@ export * from './InlineStyles';
 export * from './Box';
 export * from './factory';
 export * from './DirectionProvider';
+export * from './types';

package/lib/core/types.d.ts

@@ -0,0 +1,3 @@
+export interface DataAttributes {
+    [key: `data-${string}`]: string | number | undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.16.3",
+  "version": "8.0.0-alpha.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.16.3",
+    "@mantine/hooks": "8.0.0-alpha.0",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   }
 }

package/styles/Anchor.css

@@ -24,6 +24,24 @@
   }
 }
 
+  .m_849cf0da:where([data-underline='not-hover']) {
+    text-decoration: underline;
+  }
+
+  @media (hover: hover) {
+
+  .m_849cf0da:where([data-underline='not-hover']):hover {
+      text-decoration: none;
+  }
+}
+
+  @media (hover: none) {
+
+  .m_849cf0da:where([data-underline='not-hover']):active {
+      text-decoration: none;
+  }
+}
+
   .m_849cf0da:where([data-underline='always']) {
     text-decoration: underline;
   }

package/styles/Anchor.layer.css

@@ -24,6 +24,24 @@
   }
 }
 
+  .m_849cf0da:where([data-underline='not-hover']) {
+    text-decoration: underline;
+  }
+
+  @media (hover: hover) {
+
+  .m_849cf0da:where([data-underline='not-hover']):hover {
+      text-decoration: none;
+  }
+}
+
+  @media (hover: none) {
+
+  .m_849cf0da:where([data-underline='not-hover']):active {
+      text-decoration: none;
+  }
+}
+
   .m_849cf0da:where([data-underline='always']) {
     text-decoration: underline;
   }

package/styles/Code.css

@@ -9,13 +9,11 @@
 }
 
   :where([data-mantine-color-scheme='light']) .m_b183c0a2 {
-    background-color: var(--code-bg, var(--mantine-color-gray-1));
-    color: var(--mantine-color-black);
+    background-color: var(--code-bg, var(--mantine-color-gray-0));
 }
 
   :where([data-mantine-color-scheme='dark']) .m_b183c0a2 {
-    background-color: var(--code-bg, var(--mantine-color-dark-5));
-    color: var(--mantine-color-white);
+    background-color: var(--code-bg, var(--mantine-color-dark-6));
 }
 
   .m_b183c0a2[data-block] {

package/styles/Code.layer.css

@@ -9,13 +9,11 @@
 }
 
   :where([data-mantine-color-scheme='light']) .m_b183c0a2 {
-    background-color: var(--code-bg, var(--mantine-color-gray-1));
-    color: var(--mantine-color-black);
+    background-color: var(--code-bg, var(--mantine-color-gray-0));
 }
 
   :where([data-mantine-color-scheme='dark']) .m_b183c0a2 {
-    background-color: var(--code-bg, var(--mantine-color-dark-5));
-    color: var(--mantine-color-white);
+    background-color: var(--code-bg, var(--mantine-color-dark-6));
 }
 
   .m_b183c0a2[data-block] {

package/styles/Image.css

@@ -1,6 +1,5 @@
 .m_9e117634 {
   display: block;
-  flex: 0;
   object-fit: var(--image-object-fit, cover);
   width: 100%;
   border-radius: var(--image-radius, 0);

package/styles/Image.layer.css

@@ -1,6 +1,5 @@
 @layer mantine {.m_9e117634 {
   display: block;
-  flex: 0;
   object-fit: var(--image-object-fit, cover);
   width: 100%;
   border-radius: var(--image-radius, 0);

package/styles/Kbd.css

@@ -6,22 +6,16 @@
   --kbd-fz-xl: 20px;
   --kbd-fz: var(--kbd-fz-sm);
 
-  --kbd-padding-xs: 2px 4px;
-  --kbd-padding-sm: 3px 5px;
-  --kbd-padding-md: 4px 7px;
-  --kbd-padding-lg: 5px 9px;
-  --kbd-padding-xl: 8px 14px;
-  --kbd-padding: var(--kbd-padding-sm);
-
   font-family: var(--mantine-font-family-monospace);
   line-height: var(--mantine-line-height);
   font-weight: 700;
-  padding: var(--kbd-padding);
   font-size: var(--kbd-fz);
   border-radius: var(--mantine-radius-sm);
   border: 1px solid;
   border-bottom-width: 3px;
   unicode-bidi: embed;
+  text-align: center;
+  padding: 0.12em 0.45em;
 }
 
   :where([data-mantine-color-scheme='light']) .m_dc6f14e2 {

package/styles/Kbd.layer.css

@@ -6,22 +6,16 @@
   --kbd-fz-xl: 20px;
   --kbd-fz: var(--kbd-fz-sm);
 
-  --kbd-padding-xs: 2px 4px;
-  --kbd-padding-sm: 3px 5px;
-  --kbd-padding-md: 4px 7px;
-  --kbd-padding-lg: 5px 9px;
-  --kbd-padding-xl: 8px 14px;
-  --kbd-padding: var(--kbd-padding-sm);
-
   font-family: var(--mantine-font-family-monospace);
   line-height: var(--mantine-line-height);
   font-weight: 700;
-  padding: var(--kbd-padding);
   font-size: var(--kbd-fz);
   border-radius: var(--mantine-radius-sm);
   border: 1px solid;
   border-bottom-width: 3px;
   unicode-bidi: embed;
+  text-align: center;
+  padding: 0.12em 0.45em;
 }
 
   :where([data-mantine-color-scheme='light']) .m_dc6f14e2 {

package/styles/Menu.css

@@ -41,14 +41,18 @@
     cursor: not-allowed;
   }
 
-:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
 }
 
-:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
 }
 
+.m_99ac2aa1:where([data-sub-menu-item]) {
+    padding-inline-end: 5px;
+  }
+
 .m_5476e0d3 {
   flex: 1;
 }
@@ -66,3 +70,11 @@
 .m_8b75e504:where([data-position='right']) {
     margin-inline-start: var(--mantine-spacing-xs);
   }
+
+.m_b85b0bed {
+  transform: rotate(-90deg);
+}
+
+:where([dir="rtl"]) .m_b85b0bed {
+    transform: rotate(90deg);
+}

package/styles/Menu.layer.css

@@ -41,14 +41,18 @@
     cursor: not-allowed;
   }
 
-:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='light']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-gray-1));
 }
 
-:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where([data-hovered]):where(:not(:disabled, [data-disabled])) {
+:where([data-mantine-color-scheme='dark']) .m_99ac2aa1:where(:hover, :focus):where(:not(:disabled, [data-disabled])) {
         background-color: var(--menu-item-hover, var(--mantine-color-dark-4));
 }
 
+.m_99ac2aa1:where([data-sub-menu-item]) {
+    padding-inline-end: 5px;
+  }
+
 .m_5476e0d3 {
   flex: 1;
 }
@@ -66,4 +70,12 @@
 .m_8b75e504:where([data-position='right']) {
     margin-inline-start: var(--mantine-spacing-xs);
   }
+
+.m_b85b0bed {
+  transform: rotate(-90deg);
+}
+
+:where([dir="rtl"]) .m_b85b0bed {
+    transform: rotate(90deg);
+}
 }

package/styles/ScrollArea.css

@@ -7,6 +7,7 @@
 
 .m_c0783ff9 {
   scrollbar-width: none;
+  overscroll-behavior: var(--scrollarea-over-scroll-behavior);
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
   width: 100%;
@@ -153,3 +154,7 @@
 .m_21657268:where([data-hidden]) {
     display: none;
   }
+
+.m_b1336c6 {
+  min-width: 100%;
+}

package/styles/ScrollArea.layer.css

@@ -7,6 +7,7 @@
 
 .m_c0783ff9 {
   scrollbar-width: none;
+  overscroll-behavior: var(--scrollarea-over-scroll-behavior);
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
   width: 100%;
@@ -153,4 +154,8 @@
 .m_21657268:where([data-hidden]) {
     display: none;
   }
+
+.m_b1336c6 {
+  min-width: 100%;
+}
 }

package/styles/SegmentedControl.css

@@ -1,9 +1,9 @@
 .m_cf365364 {
-  --sc-padding-xs: 3px 6px;
-  --sc-padding-sm: 5px 10px;
-  --sc-padding-md: 7px 14px;
-  --sc-padding-lg: 9px 16px;
-  --sc-padding-xl: 12px 20px;
+  --sc-padding-xs: 2px 6px;
+  --sc-padding-sm: 3px 10px;
+  --sc-padding-md: 4px 14px;
+  --sc-padding-lg: 7px 16px;
+  --sc-padding-xl: 10px 20px;
 
   --sc-transition-duration: 200ms;
   --sc-padding: var(--sc-padding-sm);

package/styles/SegmentedControl.layer.css

@@ -1,9 +1,9 @@
 @layer mantine {.m_cf365364 {
-  --sc-padding-xs: 3px 6px;
-  --sc-padding-sm: 5px 10px;
-  --sc-padding-md: 7px 14px;
-  --sc-padding-lg: 9px 16px;
-  --sc-padding-xl: 12px 20px;
+  --sc-padding-xs: 2px 6px;
+  --sc-padding-sm: 3px 10px;
+  --sc-padding-md: 4px 14px;
+  --sc-padding-lg: 7px 16px;
+  --sc-padding-xl: 10px 20px;
 
   --sc-transition-duration: 200ms;
   --sc-padding: var(--sc-padding-sm);