@mantine/core 7.14.3 → 7.15.1

package/lib/components/Button/index.d.ts

@@ -1,4 +1,6 @@
 export { Button } from './Button';
 export { ButtonGroup } from './ButtonGroup/ButtonGroup';
+export { ButtonGroupSection } from './ButtonGroupSection/ButtonGroupSection';
 export type { ButtonProps, ButtonStylesNames, ButtonFactory, ButtonCssVariables, ButtonVariant, } from './Button';
 export type { ButtonGroupProps, ButtonGroupCssVariables, ButtonGroupStylesNames, ButtonGroupFactory, } from './ButtonGroup/ButtonGroup';
+export type { ButtonGroupSectionProps, ButtonGroupSectionCssVariables, ButtonGroupSectionStylesNames, ButtonGroupSectionFactory, } from './ButtonGroupSection/ButtonGroupSection';

package/lib/components/Collapse/use-collapse.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from '../../core';
-export declare function getElementHeight(el: React.RefObject<HTMLElement> | {
+export declare function getElementHeight(el: React.RefObject<HTMLElement | null> | {
     current?: {
         scrollHeight: number;
     };

package/lib/components/Drawer/DrawerStack.d.ts

@@ -8,7 +8,7 @@ interface DrawerStackContext {
 }
 declare const useDrawerStackContext: () => DrawerStackContext | null;
 export { useDrawerStackContext };
-interface DrawerStackProps {
+export interface DrawerStackProps {
     children: React.ReactNode;
 }
 export declare function DrawerStack({ children }: DrawerStackProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/Drawer/index.d.ts

@@ -6,6 +6,7 @@ export { DrawerContent } from './DrawerContent';
 export { DrawerHeader } from './DrawerHeader';
 export { DrawerOverlay } from './DrawerOverlay';
 export { DrawerTitle } from './DrawerTitle';
+export { DrawerStack, useDrawerStackContext } from './DrawerStack';
 export type { DrawerCssVariables, DrawerFactory, DrawerProps, DrawerStylesNames } from './Drawer';
 export type { DrawerRootProps } from './DrawerRoot';
 export type { DrawerBodyProps } from './DrawerBody';
@@ -14,3 +15,4 @@ export type { DrawerContentProps } from './DrawerContent';
 export type { DrawerHeaderProps } from './DrawerHeader';
 export type { DrawerOverlayProps } from './DrawerOverlay';
 export type { DrawerTitleProps } from './DrawerTitle';
+export type { DrawerStackProps } from './DrawerStack';

package/lib/components/Group/filter-falsy-children/filter-falsy-children.d.ts

@@ -1,2 +1,2 @@
 import { ReactElement, ReactNode } from 'react';
-export declare function filterFalsyChildren(children: ReactNode): ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+export declare function filterFalsyChildren(children: ReactNode): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[];

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>>(component: string, defaultProps: U, _props: T): Omit<T & { [Key in Extract<keyof T, never>]-?: {}[Key] | NonNullable<T[Key]>; }, "label" | "style" | "size" | "styles" | "className" | "id" | "vars" | "variant" | "unstyled" | "classNames" | "required" | "mod" | "error" | "description" | "__staticSelector" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
+export declare function useInputProps<T extends BaseProps, U extends Partial<T>>(component: string, defaultProps: U, _props: T): Omit<T & { [Key in Extract<keyof T, never>]-?: {}[Key] | NonNullable<T[Key]>; }, "label" | "style" | "size" | "styles" | "className" | "id" | "vars" | "variant" | "unstyled" | "classNames" | "mod" | "error" | "description" | "__staticSelector" | "required" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
     classNames: Partial<Record<string, string>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
     styles: Partial<Record<string, import("../../core").CSSProperties>> | ((theme: import("../../core").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../../core").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;

package/lib/components/Modal/ModalStack.d.ts

@@ -8,7 +8,7 @@ interface ModalStackContext {
 }
 declare const useModalStackContext: () => ModalStackContext | null;
 export { useModalStackContext };
-interface ModalStackProps {
+export interface ModalStackProps {
     children: React.ReactNode;
 }
 export declare function ModalStack({ children }: ModalStackProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/Modal/index.d.ts

@@ -6,7 +6,7 @@ export { ModalContent } from './ModalContent';
 export { ModalHeader } from './ModalHeader';
 export { ModalOverlay } from './ModalOverlay';
 export { ModalTitle } from './ModalTitle';
-export { ModalStack } from './ModalStack';
+export { ModalStack, useModalStackContext } from './ModalStack';
 export { useModalsStack, useDrawersStack } from './use-modals-stack';
 export type { ModalCssVariables, ModalFactory, ModalProps, ModalStylesNames } from './Modal';
 export type { ModalRootProps } from './ModalRoot';
@@ -16,3 +16,4 @@ export type { ModalContentProps } from './ModalContent';
 export type { ModalHeaderProps } from './ModalHeader';
 export type { ModalOverlayProps } from './ModalOverlay';
 export type { ModalTitleProps } from './ModalTitle';
+export type { ModalStackProps } from './ModalStack';

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

@@ -1,7 +1,7 @@
 import { MantineSize } from '../../core';
 import { InputVariant } from '../Input';
 export interface PillsInputContextValue {
-    fieldRef: React.MutableRefObject<HTMLInputElement | undefined>;
+    fieldRef: React.RefObject<HTMLInputElement | null>;
     size: MantineSize | (string & {});
     disabled: boolean | undefined;
     hasError: boolean | undefined;

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

@@ -9,7 +9,7 @@ interface PopoverContext {
     y: number;
     arrowX: number | undefined;
     arrowY: number | undefined;
-    arrowRef: React.RefObject<HTMLDivElement>;
+    arrowRef: React.RefObject<HTMLDivElement | null>;
     opened: boolean;
     transitionProps?: TransitionOverride;
     reference: (node: HTMLElement) => void;

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

@@ -12,7 +12,7 @@ interface UsePopoverOptions {
     onOpen?: () => void;
     width: PopoverWidth;
     middlewares: PopoverMiddlewares | undefined;
-    arrowRef: React.RefObject<HTMLDivElement>;
+    arrowRef: React.RefObject<HTMLDivElement | null>;
     arrowOffset: number;
     strategy?: FloatingStrategy;
 }

package/lib/components/Slider/RangeSlider/RangeSlider.d.ts

@@ -60,6 +60,8 @@ export interface RangeSliderProps extends BoxProps, StylesApiProps<RangeSliderFa
     thumbToLabel?: string;
     /** Props passed down to the hidden input */
     hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    /** Props passed down to thumb element based on the thumb index */
+    thumbProps?: (index: 0 | 1) => React.ComponentPropsWithoutRef<'div'>;
 }
 export type RangeSliderFactory = Factory<{
     props: RangeSliderProps;

package/lib/components/Slider/Slider/Slider.d.ts

@@ -55,6 +55,8 @@ export interface SliderProps extends BoxProps, StylesApiProps<SliderFactory>, El
     hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
     /** Determines whether the selection should be only allowed from the given marks array, `false` by default */
     restrictToMarks?: boolean;
+    /** Props passed down to thumb element */
+    thumbProps?: React.ComponentPropsWithoutRef<'div'>;
 }
 export type SliderFactory = Factory<{
     props: SliderProps;

package/lib/components/Slider/Thumb/Thumb.d.ts

@@ -1,5 +1,5 @@
 import { TransitionOverride } from '../../Transition';
-export interface ThumbProps {
+export interface ThumbProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'value'> {
     max: number;
     min: number;
     value: number;
@@ -7,12 +7,10 @@ export interface ThumbProps {
     dragging: boolean;
     label: React.ReactNode;
     onKeyDownCapture?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-    onMouseDown?: (event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => void;
+    onMouseDown?: (event: any) => void;
     labelTransitionProps: TransitionOverride | undefined;
     labelAlwaysOn: boolean | undefined;
     thumbLabel: string | undefined;
-    onFocus?: () => void;
-    onBlur?: () => void;
     showLabelOnHover: boolean | undefined;
     isHovered?: boolean;
     children?: React.ReactNode;

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

@@ -21,7 +21,7 @@ export interface StepperStepProps extends BoxProps, CompoundStylesApiProps<Stepp
     /** Step description */
     description?: React.ReactNode | StepFragmentComponent;
     /** Icon wrapper size */
-    iconSize?: number;
+    iconSize?: string | number;
     /** Icon position relative to step body, controlled by Stepper component */
     iconPosition?: 'right' | 'left';
     /** Indicates loading state of the step */

package/lib/components/Table/Table.d.ts

@@ -2,6 +2,7 @@ import { BoxProps, ElementProps, Factory, MantineColor, MantineSpacing, StylesAp
 import { TableCaption, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr } from './Table.components';
 import { TableDataRenderer } from './TableDataRenderer';
 import { TableScrollContainer } from './TableScrollContainer';
+export type TableVariant = 'default' | 'vertical';
 export type TableStylesNames = 'table' | 'thead' | 'tbody' | 'tfoot' | 'tr' | 'th' | 'td' | 'caption';
 export type TableCssVariables = {
     table: '--table-layout' | '--table-border-color' | '--table-caption-side' | '--table-horizontal-spacing' | '--table-vertical-spacing' | '--table-striped-color' | '--table-highlight-on-hover-color' | '--table-sticky-header-offset';
@@ -43,12 +44,15 @@ export interface TableProps extends BoxProps, StylesApiProps<TableFactory>, Elem
     stickyHeader?: boolean;
     /** Offset from top at which `Table.Thead` should become sticky, `0` by default */
     stickyHeaderOffset?: number | string;
+    /** Determines whether `font-variant-numeric: tabular-nums` style should be set, `false` by default */
+    tabularNums?: boolean;
 }
 export type TableFactory = Factory<{
     props: TableProps;
     ref: HTMLTableElement;
     stylesNames: TableStylesNames;
     vars: TableCssVariables;
+    variant: TableVariant;
     staticComponents: {
         Thead: typeof TableThead;
         Tbody: typeof TableTbody;
@@ -66,6 +70,7 @@ export declare const Table: import("../../core").MantineComponent<{
     ref: HTMLTableElement;
     stylesNames: TableStylesNames;
     vars: TableCssVariables;
+    variant: TableVariant;
     staticComponents: {
         Thead: typeof TableThead;
         Tbody: typeof TableTbody;

package/lib/components/Tooltip/TooltipFloating/use-floating-tooltip.d.ts

@@ -10,7 +10,7 @@ export declare function useFloatingTooltip<T extends HTMLElement = any>({ offset
     y: number;
     opened: boolean | undefined;
     setOpened: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
-    boundaryRef: import("react").MutableRefObject<T | undefined>;
+    boundaryRef: import("react").RefObject<T | null>;
     floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
 };
 export {};

package/lib/components/Tooltip/use-tooltip.d.ts

@@ -7,7 +7,7 @@ interface UseTooltip {
     opened?: boolean;
     defaultOpened?: boolean;
     offset: number | FloatingAxesOffsets;
-    arrowRef?: React.RefObject<HTMLDivElement>;
+    arrowRef?: React.RefObject<HTMLDivElement | null>;
     arrowOffset?: number;
     events?: {
         hover: boolean;

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

@@ -20,3 +20,4 @@ export type { CSSVariablesResolver } from './MantineCssVariables/default-css-var
 export { virtualColor, getCSSColorVariables, isVirtualColor } from './MantineCssVariables';
 export { useMatches } from './use-matches/use-matches';
 export type { MantineStylesTransform } from './Mantine.context';
+export { mantineHtmlProps } from './mantine-html-props';

package/lib/core/MantineProvider/mantine-html-props.d.ts

@@ -0,0 +1,4 @@
+export declare const mantineHtmlProps: {
+    suppressHydrationWarning: boolean;
+    'data-mantine-color-scheme': string;
+};

package/lib/core/factory/factory.d.ts

@@ -30,7 +30,7 @@ export type ComponentClasses<Payload extends FactoryPayload> = {
 };
 export type MantineComponentStaticProperties<Payload extends FactoryPayload> = ThemeExtend<Payload> & ComponentClasses<Payload> & StaticComponents<Payload['staticComponents']> & FactoryComponentWithProps<Payload>;
 export type FactoryComponentWithProps<Payload extends FactoryPayload> = {
-    withProps: (props: Payload['props']) => React.ForwardRefExoticComponent<Payload['props'] & React.RefAttributes<Payload['ref']> & {
+    withProps: (props: Partial<Payload['props']>) => React.ForwardRefExoticComponent<Payload['props'] & React.RefAttributes<Payload['ref']> & {
         component?: any;
         renderRoot?: (props: Record<string, any>) => React.ReactNode;
     }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.14.3",
+  "version": "7.15.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.14.3",
+    "@mantine/hooks": "7.15.1",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },
@@ -57,6 +57,8 @@
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
-    "@mantine/hooks": "workspace:*"
+    "@mantine/hooks": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

package/styles/ActionIcon.css

@@ -106,19 +106,19 @@
     flex-direction: row;
   }
 
-.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child {
+.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):first-child {
         border-end-end-radius: 0;
         border-start-end-radius: 0;
         border-inline-end-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child {
+.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):last-child {
         border-end-start-radius: 0;
         border-start-start-radius: 0;
         border-inline-start-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child) {
+.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-inline-width: calc(var(--ai-border-width) / 2);
       }
@@ -127,19 +127,19 @@
     flex-direction: column;
   }
 
-.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child {
+.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):first-child {
         border-end-start-radius: 0;
         border-end-end-radius: 0;
         border-bottom-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child {
+.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):last-child {
         border-start-start-radius: 0;
         border-start-end-radius: 0;
         border-top-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child) {
+.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-bottom-width: calc(var(--ai-border-width) / 2);
         border-top-width: calc(var(--ai-border-width) / 2);
@@ -155,3 +155,42 @@
   width: 100%;
   height: 100%;
 }
+
+.m_437b6484 {
+  --section-height-xs: 18px;
+  --section-height-sm: 22px;
+  --section-height-md: 28px;
+  --section-height-lg: 34px;
+  --section-height-xl: 44px;
+
+  --section-height-input-xs: 30px;
+  --section-height-input-sm: 36px;
+  --section-height-input-md: 42px;
+  --section-height-input-lg: 50px;
+  --section-height-input-xl: 60px;
+
+  --section-padding-x-xs: 6px;
+  --section-padding-x-sm: 8px;
+  --section-padding-x-md: 10px;
+  --section-padding-x-lg: 12px;
+  --section-padding-x-xl: 16px;
+
+  --section-height: var(--section-height-sm);
+  --section-padding-x: var(--section-padding-x-sm);
+  --section-color: var(--mantine-color-white);
+
+  font-weight: 600;
+  width: auto;
+  border-radius: var(--section-radius, var(--mantine-radius-default));
+  font-size: var(--section-fz, var(--mantine-font-size-sm));
+  background: var(--section-bg, var(--mantine-primary-color-filled));
+  border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
+  color: var(--section-color, var(--mantine-color-white));
+  height: var(--section-height, var(--section-height-sm));
+  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
+  vertical-align: middle;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/styles/ActionIcon.layer.css

@@ -106,19 +106,19 @@
     flex-direction: row;
   }
 
-.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child {
+.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):first-child {
         border-end-end-radius: 0;
         border-start-end-radius: 0;
         border-inline-end-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child {
+.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):last-child {
         border-end-start-radius: 0;
         border-start-start-radius: 0;
         border-inline-start-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child) {
+.m_1a0f1b21[data-orientation='horizontal'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='horizontal'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-inline-width: calc(var(--ai-border-width) / 2);
       }
@@ -127,19 +127,19 @@
     flex-direction: column;
   }
 
-.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child {
+.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):first-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):first-child {
         border-end-start-radius: 0;
         border-end-end-radius: 0;
         border-bottom-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child {
+.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):last-child, .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):last-child {
         border-start-start-radius: 0;
         border-start-end-radius: 0;
         border-top-width: calc(var(--ai-border-width) / 2);
       }
 
-.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child) {
+.m_1a0f1b21[data-orientation='vertical'] .m_8d3f4000:not(:only-child):not(:first-child):not(:last-child), .m_1a0f1b21[data-orientation='vertical'] .m_437b6484:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-bottom-width: calc(var(--ai-border-width) / 2);
         border-top-width: calc(var(--ai-border-width) / 2);
@@ -155,4 +155,43 @@
   width: 100%;
   height: 100%;
 }
+
+.m_437b6484 {
+  --section-height-xs: 18px;
+  --section-height-sm: 22px;
+  --section-height-md: 28px;
+  --section-height-lg: 34px;
+  --section-height-xl: 44px;
+
+  --section-height-input-xs: 30px;
+  --section-height-input-sm: 36px;
+  --section-height-input-md: 42px;
+  --section-height-input-lg: 50px;
+  --section-height-input-xl: 60px;
+
+  --section-padding-x-xs: 6px;
+  --section-padding-x-sm: 8px;
+  --section-padding-x-md: 10px;
+  --section-padding-x-lg: 12px;
+  --section-padding-x-xl: 16px;
+
+  --section-height: var(--section-height-sm);
+  --section-padding-x: var(--section-padding-x-sm);
+  --section-color: var(--mantine-color-white);
+
+  font-weight: 600;
+  width: auto;
+  border-radius: var(--section-radius, var(--mantine-radius-default));
+  font-size: var(--section-fz, var(--mantine-font-size-sm));
+  background: var(--section-bg, var(--mantine-primary-color-filled));
+  border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
+  color: var(--section-color, var(--mantine-color-white));
+  height: var(--section-height, var(--section-height-sm));
+  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
+  vertical-align: middle;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 }

package/styles/Button.css

@@ -184,19 +184,19 @@
     flex-direction: row;
   }
 
-.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):first-child {
+.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):first-child {
         border-end-end-radius: 0;
         border-start-end-radius: 0;
         border-inline-end-width: calc(var(--button-border-width) / 2);
       }
 
-.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):last-child {
+.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):last-child {
         border-end-start-radius: 0;
         border-start-start-radius: 0;
         border-inline-start-width: calc(var(--button-border-width) / 2);
       }
 
-.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child) {
+.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-inline-width: calc(var(--button-border-width) / 2);
       }
@@ -205,20 +205,65 @@
     flex-direction: column;
   }
 
-.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):first-child {
+.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):first-child {
         border-end-start-radius: 0;
         border-end-end-radius: 0;
         border-bottom-width: calc(var(--button-border-width) / 2);
       }
 
-.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):last-child {
+.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):last-child {
         border-start-start-radius: 0;
         border-start-end-radius: 0;
         border-top-width: calc(var(--button-border-width) / 2);
       }
 
-.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child) {
+.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-bottom-width: calc(var(--button-border-width) / 2);
         border-top-width: calc(var(--button-border-width) / 2);
       }
+
+.m_70be2a01 {
+  --section-height-xs: 30px;
+  --section-height-sm: 36px;
+  --section-height-md: 42px;
+  --section-height-lg: 50px;
+  --section-height-xl: 60px;
+
+  --section-height-compact-xs: 22px;
+  --section-height-compact-sm: 26px;
+  --section-height-compact-md: 30px;
+  --section-height-compact-lg: 34px;
+  --section-height-compact-xl: 40px;
+
+  --section-padding-x-xs: 14px;
+  --section-padding-x-sm: 18px;
+  --section-padding-x-md: 22px;
+  --section-padding-x-lg: 26px;
+  --section-padding-x-xl: 32px;
+
+  --section-padding-x-compact-xs: 7px;
+  --section-padding-x-compact-sm: 8px;
+  --section-padding-x-compact-md: 10px;
+  --section-padding-x-compact-lg: 12px;
+  --section-padding-x-compact-xl: 14px;
+
+  --section-height: var(--section-height-sm);
+  --section-padding-x: var(--section-padding-x-sm);
+  --section-color: var(--mantine-color-white);
+
+  font-weight: 600;
+  width: auto;
+  border-radius: var(--section-radius, var(--mantine-radius-default));
+  font-size: var(--section-fz, var(--mantine-font-size-sm));
+  background: var(--section-bg, var(--mantine-primary-color-filled));
+  border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
+  color: var(--section-color, var(--mantine-color-white));
+  height: var(--section-height, var(--section-height-sm));
+  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
+  vertical-align: middle;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}

package/styles/Button.layer.css

@@ -184,19 +184,19 @@
     flex-direction: row;
   }
 
-.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):first-child {
+.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):first-child {
         border-end-end-radius: 0;
         border-start-end-radius: 0;
         border-inline-end-width: calc(var(--button-border-width) / 2);
       }
 
-.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):last-child {
+.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):last-child {
         border-end-start-radius: 0;
         border-start-start-radius: 0;
         border-inline-start-width: calc(var(--button-border-width) / 2);
       }
 
-.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child) {
+.m_80d6d844[data-orientation='horizontal'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='horizontal'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-inline-width: calc(var(--button-border-width) / 2);
       }
@@ -205,21 +205,66 @@
     flex-direction: column;
   }
 
-.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):first-child {
+.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):first-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):first-child {
         border-end-start-radius: 0;
         border-end-end-radius: 0;
         border-bottom-width: calc(var(--button-border-width) / 2);
       }
 
-.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):last-child {
+.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):last-child, .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):last-child {
         border-start-start-radius: 0;
         border-start-end-radius: 0;
         border-top-width: calc(var(--button-border-width) / 2);
       }
 
-.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child) {
+.m_80d6d844[data-orientation='vertical'] .m_77c9d27d:not(:only-child):not(:first-child):not(:last-child), .m_80d6d844[data-orientation='vertical'] .m_70be2a01:not(:only-child):not(:first-child):not(:last-child) {
         border-radius: 0;
         border-bottom-width: calc(var(--button-border-width) / 2);
         border-top-width: calc(var(--button-border-width) / 2);
       }
+
+.m_70be2a01 {
+  --section-height-xs: 30px;
+  --section-height-sm: 36px;
+  --section-height-md: 42px;
+  --section-height-lg: 50px;
+  --section-height-xl: 60px;
+
+  --section-height-compact-xs: 22px;
+  --section-height-compact-sm: 26px;
+  --section-height-compact-md: 30px;
+  --section-height-compact-lg: 34px;
+  --section-height-compact-xl: 40px;
+
+  --section-padding-x-xs: 14px;
+  --section-padding-x-sm: 18px;
+  --section-padding-x-md: 22px;
+  --section-padding-x-lg: 26px;
+  --section-padding-x-xl: 32px;
+
+  --section-padding-x-compact-xs: 7px;
+  --section-padding-x-compact-sm: 8px;
+  --section-padding-x-compact-md: 10px;
+  --section-padding-x-compact-lg: 12px;
+  --section-padding-x-compact-xl: 14px;
+
+  --section-height: var(--section-height-sm);
+  --section-padding-x: var(--section-padding-x-sm);
+  --section-color: var(--mantine-color-white);
+
+  font-weight: 600;
+  width: auto;
+  border-radius: var(--section-radius, var(--mantine-radius-default));
+  font-size: var(--section-fz, var(--mantine-font-size-sm));
+  background: var(--section-bg, var(--mantine-primary-color-filled));
+  border: var(--section-bd, calc(0.0625rem * var(--mantine-scale)) solid transparent);
+  color: var(--section-color, var(--mantine-color-white));
+  height: var(--section-height, var(--section-height-sm));
+  padding-inline: var(--section-padding-x, var(--section-padding-x-sm));
+  vertical-align: middle;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
 }