@mantine/core 7.17.1 → 8.0.0-alpha.1

package/lib/components/Menu/MenuSub/MenuSub.context.d.ts

@@ -0,0 +1,13 @@
+interface SubMenuContext {
+    opened: boolean;
+    close: () => void;
+    open: () => void;
+    focusFirstItem: () => void;
+    focusParentItem: () => void;
+    parentContext: SubMenuContext | null;
+}
+export declare const SubMenuProvider: ({ children, value }: {
+    value: SubMenuContext;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useSubMenuContext: () => SubMenuContext | null;
+export {};

package/lib/components/Menu/MenuSub/MenuSub.d.ts

@@ -0,0 +1,53 @@
+import { ExtendComponent, Factory } from '../../../core';
+import { __PopoverProps } from '../../Popover';
+import { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';
+export type MenuSubFactory = Factory<{
+    props: MenuSubProps;
+}>;
+interface MenuSubProps extends __PopoverProps {
+    children: React.ReactNode;
+    /** Close delay in ms */
+    closeDelay?: number;
+}
+export declare function MenuSub(_props: MenuSubProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuSub {
+    var extend: (input: ExtendComponent<MenuSubFactory>) => import("../../../core/factory/factory").ExtendsRootComponent<{
+        props: MenuSubProps;
+    }>;
+    var displayName: string;
+    var Target: typeof MenuSubTarget;
+    var Dropdown: import("../../../core").MantineComponent<{
+        props: import("../MenuSubDropdown/MenuSubDropdown").MenuSubDropdownProps;
+        ref: HTMLDivElement;
+        stylesNames: import("../MenuSubDropdown/MenuSubDropdown").MenuSubDropdownStylesNames;
+        compound: true;
+    }>;
+    var Item: (<C = "button">(props: import("../../../core").PolymorphicComponentProps<C, import("../MenuSubItem/MenuSubItem").MenuSubItemProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(import("../MenuSubItem/MenuSubItem").MenuSubItemProps & {
+        component?: any;
+    } & Omit<Omit<any, "ref">, "component" | keyof import("../MenuSubItem/MenuSubItem").MenuSubItemProps> & {
+        ref?: any;
+        renderRoot?: (props: any) => any;
+    }) | (import("../MenuSubItem/MenuSubItem").MenuSubItemProps & {
+        component: React.ElementType;
+        renderRoot?: (props: Record<string, any>) => any;
+    })>, never> & import("../../../core/factory/factory").ThemeExtend<{
+        props: import("../MenuSubItem/MenuSubItem").MenuSubItemProps;
+        defaultRef: HTMLButtonElement;
+        defaultComponent: "button";
+        stylesNames: import("../MenuSubItem/MenuSubItem").MenuSubItemStylesNames;
+        compound: true;
+    }> & import("../../../core/factory/factory").ComponentClasses<{
+        props: import("../MenuSubItem/MenuSubItem").MenuSubItemProps;
+        defaultRef: HTMLButtonElement;
+        defaultComponent: "button";
+        stylesNames: import("../MenuSubItem/MenuSubItem").MenuSubItemStylesNames;
+        compound: true;
+    }> & import("../../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+        props: import("../MenuSubItem/MenuSubItem").MenuSubItemProps;
+        defaultRef: HTMLButtonElement;
+        defaultComponent: "button";
+        stylesNames: import("../MenuSubItem/MenuSubItem").MenuSubItemStylesNames;
+        compound: true;
+    }> & Record<string, never>;
+}
+export {};

package/lib/components/Menu/MenuSubDropdown/MenuSubDropdown.d.ts

@@ -0,0 +1,16 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type MenuSubDropdownStylesNames = 'dropdown';
+export interface MenuSubDropdownProps extends BoxProps, CompoundStylesApiProps<MenuSubDropdownFactory>, ElementProps<'div'> {
+}
+export type MenuSubDropdownFactory = Factory<{
+    props: MenuSubDropdownProps;
+    ref: HTMLDivElement;
+    stylesNames: MenuSubDropdownStylesNames;
+    compound: true;
+}>;
+export declare const MenuSubDropdown: import("../../../core").MantineComponent<{
+    props: MenuSubDropdownProps;
+    ref: HTMLDivElement;
+    stylesNames: MenuSubDropdownStylesNames;
+    compound: true;
+}>;

package/lib/components/Menu/MenuSubItem/MenuSubItem.d.ts

@@ -0,0 +1,51 @@
+import { BoxProps, CompoundStylesApiProps, MantineColor, PolymorphicFactory } from '../../../core';
+export type MenuSubItemStylesNames = 'item' | 'itemLabel' | 'itemSection';
+export interface MenuSubItemProps extends BoxProps, CompoundStylesApiProps<MenuSubItemFactory> {
+    'data-disabled'?: boolean;
+    /** Item label */
+    children?: React.ReactNode;
+    /** Key of `theme.colors` or any valid CSS color */
+    color?: MantineColor;
+    /** Section displayed on the left side of the label */
+    leftSection?: React.ReactNode;
+    /** Section displayed on the right side of the label */
+    rightSection?: React.ReactNode;
+    /** Disables item */
+    disabled?: boolean;
+    /** Determines whether the menu should be closed when the item is clicked, `false` by default */
+    closeMenuOnClick?: boolean;
+}
+export type MenuSubItemFactory = PolymorphicFactory<{
+    props: MenuSubItemProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: MenuSubItemStylesNames;
+    compound: true;
+}>;
+export declare const MenuSubItem: (<C = "button">(props: import("../../../core").PolymorphicComponentProps<C, MenuSubItemProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(MenuSubItemProps & {
+    component?: any;
+} & Omit<Omit<any, "ref">, "component" | keyof MenuSubItemProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+}) | (MenuSubItemProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+})>, never> & import("../../../core/factory/factory").ThemeExtend<{
+    props: MenuSubItemProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: MenuSubItemStylesNames;
+    compound: true;
+}> & import("../../../core/factory/factory").ComponentClasses<{
+    props: MenuSubItemProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: MenuSubItemStylesNames;
+    compound: true;
+}> & import("../../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: MenuSubItemProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: "button";
+    stylesNames: MenuSubItemStylesNames;
+    compound: true;
+}> & Record<string, never>;

package/lib/components/Menu/MenuSubTarget/MenuSubTarget.d.ts

@@ -0,0 +1,10 @@
+export interface MenuSubTargetProps {
+    /** Target element */
+    children: React.ReactNode;
+    /** Key of the prop that should be used to get element ref */
+    refProp?: string;
+}
+export declare function MenuSubTarget({ children, refProp }: MenuSubTargetProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuSubTarget {
+    var displayName: string;
+}

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

@@ -47,6 +47,7 @@ interface PopoverContext {
     getStyles: GetStylesApi<PopoverFactory>;
     resolvedStyles: Record<string, any>;
     floatingStrategy: FloatingStrategy | undefined;
+    referenceHidden: boolean | undefined;
 }
 export declare const PopoverContextProvider: ({ children, value }: {
     value: PopoverContext;

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

@@ -65,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/Portal/Portal.d.ts

@@ -4,7 +4,7 @@ export interface PortalProps extends React.ComponentPropsWithoutRef<'div'> {
     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, `false` by default */
+    /** If set, all portals are rendered in the same DOM node, `true` by default */
     reuseTargetNode?: boolean;
 }
 export type PortalFactory = Factory<{

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';
 };

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/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';

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

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

@@ -154,3 +154,7 @@
 .m_21657268:where([data-hidden]) {
     display: none;
   }
+
+.m_b1336c6 {
+  min-width: 100%;
+}

package/styles/ScrollArea.layer.css

@@ -154,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);