@mantine/core 7.10.2 → 7.11.0

package/lib/components/Avatar/get-initials/get-initials.d.ts

@@ -0,0 +1 @@
+export declare function getInitials(name: string, limit?: number): string;

package/lib/components/Avatar/get-initials-color/get-initials-color.d.ts

@@ -0,0 +1,2 @@
+import { MantineColor } from '../../../core';
+export declare function getInitialsColor(name: string, colors?: MantineColor[]): import("../../../core").DefaultMantineColor;

package/lib/components/BackgroundImage/BackgroundImage.d.ts

@@ -36,4 +36,10 @@ export declare const BackgroundImage: (<C = "div">(props: import("../../core").P
     defaultComponent: 'div';
     stylesNames: BackgroundImageStylesNames;
     vars: BackgroundImageCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: BackgroundImageProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: BackgroundImageStylesNames;
+    vars: BackgroundImageCssVariables;
 }> & Record<string, never>;

package/lib/components/Badge/Badge.d.ts

@@ -56,4 +56,11 @@ export declare const Badge: (<C = "div">(props: import("../../core").Polymorphic
     stylesNames: BadgeStylesNames;
     vars: BadgeCssVariables;
     variant: BadgeVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: BadgeProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: BadgeStylesNames;
+    vars: BadgeCssVariables;
+    variant: BadgeVariant;
 }> & Record<string, never>;

package/lib/components/Burger/Burger.d.ts

@@ -1,11 +1,13 @@
 import { BoxProps, ElementProps, Factory, MantineColor, MantineSize, StylesApiProps } from '../../core';
 export type BurgerStylesNames = 'root' | 'burger';
 export type BurgerCssVariables = {
-    root: '--burger-color' | '--burger-size' | '--burger-transition-duration' | '--burger-transition-timing-function';
+    root: '--burger-color' | '--burger-size' | '--burger-line-size' | '--burger-transition-duration' | '--burger-transition-timing-function';
 };
 export interface BurgerProps extends BoxProps, StylesApiProps<BurgerFactory>, ElementProps<'button'> {
     /** Controls burger `width` and `height`, numbers are converted to rem, `'md'` by default */
     size?: MantineSize | (string & {}) | number;
+    /** Controls height of lines, by default calculated based on `size` prop */
+    lineSize?: string | number;
     /** Key of `theme.colors` of any valid CSS value, by default `theme.white` in dark color scheme and `theme.black` in light */
     color?: MantineColor;
     /** State of the burger, when `true` burger is transformed into X, `false` by default */

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

@@ -74,6 +74,16 @@ export declare const Button: (<C = "button">(props: import("../../core").Polymor
     staticComponents: {
         Group: typeof ButtonGroup;
     };
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: ButtonProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: ButtonStylesNames;
+    vars: ButtonCssVariables;
+    variant: ButtonVariant;
+    staticComponents: {
+        Group: typeof ButtonGroup;
+    };
 }> & {
     Group: typeof ButtonGroup;
 };

package/lib/components/Card/Card.d.ts

@@ -52,6 +52,15 @@ export declare const Card: (<C = "div">(props: import("../../core").PolymorphicC
     staticComponents: {
         Section: typeof CardSection;
     };
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: CardProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardStylesNames;
+    vars: CardCssVariables;
+    staticComponents: {
+        Section: typeof CardSection;
+    };
 }> & {
     Section: typeof CardSection;
 };

package/lib/components/Card/CardSection/CardSection.d.ts

@@ -33,4 +33,10 @@ export declare const CardSection: (<C = "div">(props: import("../../../core").Po
     defaultComponent: 'div';
     stylesNames: CardSectionStylesNames;
     compound: true;
+}> & import("../../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: CardSectionProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CardSectionStylesNames;
+    compound: true;
 }> & Record<string, never>;

package/lib/components/Center/Center.d.ts

@@ -30,4 +30,9 @@ export declare const Center: (<C = "div">(props: import("../../core").Polymorphi
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
     stylesNames: CenterStylesNames;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: CenterProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: CenterStylesNames;
 }> & Record<string, never>;

package/lib/components/CloseButton/CloseButton.d.ts

@@ -51,4 +51,11 @@ export declare const CloseButton: (<C = "button">(props: import("../../core").Po
     stylesNames: CloseButtonStylesNames;
     variant: CloseButtonVariant;
     vars: CloseButtonCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: CloseButtonProps;
+    defaultComponent: 'button';
+    defaultRef: HTMLButtonElement;
+    stylesNames: CloseButtonStylesNames;
+    variant: CloseButtonVariant;
+    vars: CloseButtonCssVariables;
 }> & Record<string, never>;

package/lib/components/ColorSwatch/ColorSwatch.d.ts

@@ -42,4 +42,10 @@ export declare const ColorSwatch: (<C = "div">(props: import("../../core").Polym
     defaultComponent: 'div';
     stylesNames: ColorSwatchStylesNames;
     vars: ColorSwatchCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: ColorSwatchProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: ColorSwatchStylesNames;
+    vars: ColorSwatchCssVariables;
 }> & Record<string, never>;

package/lib/components/Flex/Flex.d.ts

@@ -40,4 +40,9 @@ export declare const Flex: (<C = "div">(props: import("../../core").PolymorphicC
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
     stylesNames: FlexStylesNames;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: FlexProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: FlexStylesNames;
 }> & Record<string, never>;

package/lib/components/Highlight/Highlight.d.ts

@@ -37,4 +37,10 @@ export declare const Highlight: (<C = "div">(props: import("../../core").Polymor
     defaultComponent: 'div';
     stylesNames: TextStylesNames;
     variant: TextVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: HighlightProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: TextStylesNames;
+    variant: TextVariant;
 }> & Record<string, never>;

package/lib/components/Image/Image.d.ts

@@ -42,4 +42,10 @@ export declare const Image: (<C = "img">(props: import("../../core").Polymorphic
     defaultComponent: 'img';
     stylesNames: ImageStylesNames;
     vars: ImageCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: ImageProps;
+    defaultRef: HTMLImageElement;
+    defaultComponent: 'img';
+    stylesNames: ImageStylesNames;
+    vars: ImageCssVariables;
 }> & Record<string, never>;

package/lib/components/Input/Input.d.ts

@@ -119,6 +119,21 @@ export declare const Input: (<C = "input">(props: import("../../core").Polymorph
         Placeholder: typeof InputPlaceholder;
         Wrapper: typeof InputWrapper;
     };
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: InputProps;
+    defaultRef: HTMLInputElement;
+    defaultComponent: 'input';
+    stylesNames: InputStylesNames;
+    variant: InputVariant;
+    vars: InputCssVariables;
+    ctx: InputStylesCtx;
+    staticComponents: {
+        Label: typeof InputLabel;
+        Error: typeof InputError;
+        Description: typeof InputDescription;
+        Placeholder: typeof InputPlaceholder;
+        Wrapper: typeof InputWrapper;
+    };
 }> & {
     Label: typeof InputLabel;
     Error: typeof InputError;

package/lib/components/InputBase/InputBase.d.ts

@@ -37,4 +37,10 @@ export declare const InputBase: (<C = "input">(props: import("../../core").Polym
     defaultComponent: 'input';
     stylesNames: __InputStylesNames;
     variant: InputVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: InputBaseProps;
+    defaultRef: HTMLInputElement;
+    defaultComponent: 'input';
+    stylesNames: __InputStylesNames;
+    variant: InputVariant;
 }> & Record<string, never>;

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

@@ -76,6 +76,12 @@ export declare namespace Menu {
         defaultComponent: "button";
         stylesNames: import("./MenuItem/MenuItem").MenuItemStylesNames;
         compound: true;
+    }> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+        props: import("./MenuItem/MenuItem").MenuItemProps;
+        defaultRef: HTMLButtonElement;
+        defaultComponent: "button";
+        stylesNames: import("./MenuItem/MenuItem").MenuItemStylesNames;
+        compound: true;
     }> & Record<string, never>;
     var Label: import("../../core").MantineComponent<{
         props: import("./MenuLabel/MenuLabel").MenuLabelProps;

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

@@ -42,4 +42,10 @@ export declare const MenuItem: (<C = "button">(props: import("../../../core").Po
     defaultComponent: 'button';
     stylesNames: MenuItemStylesNames;
     compound: true;
+}> & import("../../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: MenuItemProps;
+    defaultRef: HTMLButtonElement;
+    defaultComponent: 'button';
+    stylesNames: MenuItemStylesNames;
+    compound: true;
 }> & Record<string, never>;

package/lib/components/NavLink/NavLink.d.ts

@@ -71,4 +71,11 @@ export declare const NavLink: (<C = "a">(props: import("../../core").Polymorphic
     stylesNames: NavLinkStylesNames;
     vars: NavLinkCssVariables;
     variant: NavLinkVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: NavLinkProps;
+    defaultRef: HTMLAnchorElement;
+    defaultComponent: 'a';
+    stylesNames: NavLinkStylesNames;
+    vars: NavLinkCssVariables;
+    variant: NavLinkVariant;
 }> & Record<string, never>;

package/lib/components/Overlay/Overlay.d.ts

@@ -50,4 +50,10 @@ export declare const Overlay: (<C = "div">(props: import("../../core").Polymorph
     defaultComponent: 'div';
     stylesNames: OverlayStylesNames;
     vars: OverlayCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: OverlayProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: OverlayStylesNames;
+    vars: OverlayCssVariables;
 }> & Record<string, never>;

package/lib/components/Pagination/Pagination.d.ts

@@ -26,6 +26,8 @@ export interface PaginationProps extends PaginationRootProps {
     dotsIcon?: PaginationIcon;
     /** Key of `theme.spacing`, gap between controls, `8` by default */
     gap?: MantineSize | (string & {}) | number;
+    /** Determines whether the pagination should be hidden when only one page is available (`total={1}`), `false` by default */
+    hideWithOnePage?: boolean;
 }
 export type PaginationFactory = Factory<{
     props: PaginationProps;

package/lib/components/Paper/Paper.d.ts

@@ -40,4 +40,10 @@ export declare const Paper: (<C = "div">(props: import("../../core").Polymorphic
     defaultRef: HTMLDivElement;
     stylesNames: PaperStylesNames;
     vars: PaperCssVariables;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: PaperProps;
+    defaultComponent: 'div';
+    defaultRef: HTMLDivElement;
+    stylesNames: PaperStylesNames;
+    vars: PaperCssVariables;
 }> & Record<string, never>;

package/lib/components/Spoiler/Spoiler.d.ts

@@ -14,6 +14,10 @@ export interface SpoilerProps extends BoxProps, StylesApiProps<SpoilerFactory>,
     controlRef?: React.ForwardedRef<HTMLButtonElement>;
     /** Initial spoiler state, true to wrap content in spoiler, false to show content without spoiler, opened state is updated on mount */
     initialState?: boolean;
+    /** Controlled expanded state value */
+    expanded?: boolean;
+    /** Called when expanded state changes (when spoiler visibility is toggled by the user) */
+    onExpandedChange?: (expanded: boolean) => void;
     /** Spoiler reveal transition duration in ms, set 0 or null to turn off animation, `200` by default */
     transitionDuration?: number;
 }

package/lib/components/TagsInput/TagsInput.d.ts

@@ -43,6 +43,8 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<Combobo
     renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxStringItem>) => React.ReactNode;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     scrollAreaProps?: ScrollAreaProps;
+    /** Determines whether the value typed in by the user but not submitted should be accepted when the input is blurred, `true` by default */
+    acceptValueOnBlur?: boolean;
 }
 export type TagsInputFactory = Factory<{
     props: TagsInputProps;

package/lib/components/Text/Text.d.ts

@@ -54,5 +54,12 @@ export declare const Text: (<C = "p">(props: import("../../core").PolymorphicCom
     stylesNames: TextStylesNames;
     vars: TextCssVariables;
     variant: TextVariant;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: TextProps;
+    defaultComponent: 'p';
+    defaultRef: HTMLParagraphElement;
+    stylesNames: TextStylesNames;
+    vars: TextCssVariables;
+    variant: TextVariant;
 }> & Record<string, never>;
 export {};

package/lib/components/Transition/Transition.d.ts

@@ -22,9 +22,13 @@ export interface TransitionProps {
     onEnter?: () => void;
     /** Called when enter transition ends */
     onEntered?: () => void;
+    /** Delay in ms before enter transition starts */
+    enterDelay?: number;
+    /** Delay in ms before exit transition starts */
+    exitDelay?: number;
 }
 export type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;
-export declare function Transition({ keepMounted, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, }: TransitionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Transition({ keepMounted, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, enterDelay, exitDelay, }: TransitionProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Transition {
     var displayName: string;
 }

package/lib/components/Transition/use-transition.d.ts

@@ -8,8 +8,10 @@ interface UseTransition {
     onExit?: () => void;
     onEntered?: () => void;
     onExited?: () => void;
+    enterDelay?: number;
+    exitDelay?: number;
 }
-export declare function useTransition({ duration, exitDuration, timingFunction, mounted, onEnter, onExit, onEntered, onExited, }: UseTransition): {
+export declare function useTransition({ duration, exitDuration, timingFunction, mounted, onEnter, onExit, onEntered, onExited, enterDelay, exitDelay, }: UseTransition): {
     transitionDuration: number;
     transitionStatus: TransitionStatus;
     transitionTimingFunction: string;

package/lib/components/UnstyledButton/UnstyledButton.d.ts

@@ -27,4 +27,9 @@ export declare const UnstyledButton: (<C = "button">(props: import("../../core")
     stylesNames: UnstyledButtonStylesNames;
     defaultComponent: 'button';
     defaultRef: HTMLButtonElement;
+}> & import("../../core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
+    props: UnstyledButtonProps;
+    stylesNames: UnstyledButtonStylesNames;
+    defaultComponent: 'button';
+    defaultRef: HTMLButtonElement;
 }> & Record<string, never>;

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

@@ -28,7 +28,13 @@ export interface ThemeExtend<Payload extends FactoryPayload> {
 export type ComponentClasses<Payload extends FactoryPayload> = {
     classes: Payload['stylesNames'] extends string ? Record<string, string> : never;
 };
-export type MantineComponentStaticProperties<Payload extends FactoryPayload> = ThemeExtend<Payload> & ComponentClasses<Payload> & StaticComponents<Payload['staticComponents']>;
+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']> & {
+        component?: any;
+        renderRoot?: (props: Record<string, any>) => React.ReactNode;
+    }>;
+};
 export type MantineComponent<Payload extends FactoryPayload> = React.ForwardRefExoticComponent<Payload['props'] & React.RefAttributes<Payload['ref']> & {
     component?: any;
     renderRoot?: (props: Record<string, any>) => React.ReactNode;

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

@@ -1,6 +1,6 @@
 export { factory } from './factory';
 export { polymorphicFactory } from './polymorphic-factory';
 export { createPolymorphicComponent } from './create-polymorphic-component';
-export type { FactoryPayload, ExtendComponent, MantineComponent, MantineComponentStaticProperties, } from './factory';
+export type { FactoryPayload, ExtendComponent, MantineComponent, MantineComponentStaticProperties, FactoryComponentWithProps, } from './factory';
 export type { PolymorphicComponentProps, PolymorphicRef } from './create-polymorphic-component';
 export type { Factory, PolymorphicFactory } from './create-factory';

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

@@ -4,6 +4,9 @@ export interface PolymorphicFactoryPayload extends FactoryPayload {
     defaultComponent: any;
     defaultRef: any;
 }
+export type PolymorphicComponentWithProps<Payload extends PolymorphicFactoryPayload> = {
+    withProps: <C = Payload['defaultComponent']>(fixedProps: PolymorphicComponentProps<C, Payload['props']>) => <L = C>(props: PolymorphicComponentProps<L, Payload['props']>) => React.ReactElement;
+};
 export declare function polymorphicFactory<Payload extends PolymorphicFactoryPayload>(ui: React.ForwardRefRenderFunction<Payload['defaultRef'], Payload['props']>): (<C = Payload["defaultComponent"]>(props: PolymorphicComponentProps<C, Payload["props"]>) => React.ReactElement) & Omit<import("react").FunctionComponent<(Payload["props"] & {
     component?: any;
 } & Omit<Omit<any, "ref">, "component" | keyof Payload["props"]> & {
@@ -12,4 +15,4 @@ export declare function polymorphicFactory<Payload extends PolymorphicFactoryPay
 }) | (Payload["props"] & {
     component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
     renderRoot?: ((props: Record<string, any>) => any) | undefined;
-})>, never> & ThemeExtend<Payload> & ComponentClasses<Payload> & StaticComponents<Payload["staticComponents"]>;
+})>, never> & ThemeExtend<Payload> & ComponentClasses<Payload> & PolymorphicComponentWithProps<Payload> & StaticComponents<Payload["staticComponents"]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.10.2",
+  "version": "7.11.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.10.2",
+    "@mantine/hooks": "7.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -57,6 +57,6 @@
   },
   "devDependencies": {
     "@mantine-tests/core": "1.1.0",
-    "@mantine/hooks": "7.10.2"
+    "@mantine/hooks": "7.11.0"
   }
 }

package/styles/Burger.css

@@ -6,6 +6,7 @@
   --burger-size-xl: 42px;
 
   --burger-size: var(--burger-size-md);
+  --burger-line-size: calc(var(--burger-size) / 12);
 
   width: calc(var(--burger-size) + var(--mantine-spacing-xs));
   height: calc(var(--burger-size) + var(--mantine-spacing-xs));
@@ -31,7 +32,7 @@
   .m_d4fb9cad::after {
     display: block;
     width: var(--burger-size);
-    height: calc(var(--burger-size) / 12);
+    height: var(--burger-line-size);
     background-color: var(--burger-color);
     outline: 1px solid transparent;
     transition-property: background-color, transform;

package/styles/Burger.layer.css

@@ -6,6 +6,7 @@
   --burger-size-xl: 42px;
 
   --burger-size: var(--burger-size-md);
+  --burger-line-size: calc(var(--burger-size) / 12);
 
   width: calc(var(--burger-size) + var(--mantine-spacing-xs));
   height: calc(var(--burger-size) + var(--mantine-spacing-xs));
@@ -31,7 +32,7 @@
   .m_d4fb9cad::after {
     display: block;
     width: var(--burger-size);
-    height: calc(var(--burger-size) / 12);
+    height: var(--burger-line-size);
     background-color: var(--burger-color);
     outline: 1px solid transparent;
     transition-property: background-color, transform;

package/styles.css

@@ -2825,6 +2825,7 @@ fieldset:disabled .m_d3ea56bb,
   --burger-size-xl: calc(2.625rem * var(--mantine-scale));
 
   --burger-size: var(--burger-size-md);
+  --burger-line-size: calc(var(--burger-size) / 12);
 
   width: calc(var(--burger-size) + var(--mantine-spacing-xs));
   height: calc(var(--burger-size) + var(--mantine-spacing-xs));
@@ -2850,7 +2851,7 @@ fieldset:disabled .m_d3ea56bb,
   .m_d4fb9cad::after {
     display: block;
     width: var(--burger-size);
-    height: calc(var(--burger-size) / 12);
+    height: var(--burger-line-size);
     background-color: var(--burger-color);
     outline: calc(0.0625rem * var(--mantine-scale)) solid transparent;
     transition-property: background-color, transform;

package/styles.layer.css

@@ -2825,6 +2825,7 @@ fieldset:disabled .m_d3ea56bb,
   --burger-size-xl: calc(2.625rem * var(--mantine-scale));
 
   --burger-size: var(--burger-size-md);
+  --burger-line-size: calc(var(--burger-size) / 12);
 
   width: calc(var(--burger-size) + var(--mantine-spacing-xs));
   height: calc(var(--burger-size) + var(--mantine-spacing-xs));
@@ -2850,7 +2851,7 @@ fieldset:disabled .m_d3ea56bb,
   .m_d4fb9cad::after {
     display: block;
     width: var(--burger-size);
-    height: calc(var(--burger-size) / 12);
+    height: var(--burger-line-size);
     background-color: var(--burger-color);
     outline: calc(0.0625rem * var(--mantine-scale)) solid transparent;
     transition-property: background-color, transform;