@mantine/core - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

dist/mantine-core/src/ActionIcon/ActionIcon.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-interface ActionIconProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {
+import { ComponentPassThrough } from "../../../mantine-types/src";
+export interface ActionIconProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {
     /** Icon rendered inside button */
@@ -18,3 +19,3 @@ children: React.ReactNode;
 export declare const ACTION_ICON_SIZES: {
-    xs: number; /** Controls appearance */
+    xs: number;
     sm: number;
@@ -25,7 +26,8 @@ md: number;
 };
-export declare function ActionIcon({ className, color, children, radius, size, variant, themeOverride, elementRef, ...others }: ActionIconProps): JSX.Element;
+export declare function ActionIcon<T extends React.ElementType = 'button', U = HTMLButtonElement>({ className, color, children, radius, size, variant, themeOverride, elementRef, component: Element, ...others }: ComponentPassThrough<T, ActionIconProps> & {
+    elementRef?: React.ForwardedRef<U>;
+}): JSX.Element;
 export declare namespace ActionIcon {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=ActionIcon.d.ts.map

dist/mantine-core/src/ActionIcon/ActionIcon.styles.d.ts

@@ -15,6 +15,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 };
-declare const _default: (data?: ActionIconStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"outline" | "light" | "transparent" | "filled" | "hover" | "actionIcon">;
+declare const _default: (args?: ActionIconStylesProps) => import("jss").Classes<"outline" | "light" | "transparent" | "filled" | "hover" | "actionIcon">;
 export default _default;
 //# sourceMappingURL=ActionIcon.styles.d.ts.map

dist/mantine-core/src/Alert/Alert.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface AlertProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+export interface AlertProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
     /** Optional alert title */
@@ -17,3 +17,2 @@ title?: React.ReactNode;
 }
-export {};
 //# sourceMappingURL=Alert.d.ts.map

dist/mantine-core/src/Alert/Alert.styles.d.ts

@@ -6,6 +6,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: AlertStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"body" | "title" | "alert">;
+declare const _default: (args?: AlertStylesProps) => import("jss").Classes<"body" | "title" | "alert">;
 export default _default;
 //# sourceMappingURL=Alert.styles.d.ts.map

dist/mantine-core/src/Avatar/Avatar.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 };
-interface AvatarProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface AvatarProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Image url */
@@ -27,3 +27,2 @@ src?: string;
 }
-export {};
 //# sourceMappingURL=Avatar.d.ts.map

dist/mantine-core/src/Avatar/Avatar.styles.d.ts

@@ -15,6 +15,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: AvatarStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"image" | "placeholder" | "avatar" | "placeholderIcon">;
+declare const _default: (args?: AvatarStylesProps) => import("jss").Classes<"image" | "placeholder" | "avatar" | "placeholderIcon">;
 export default _default;
 //# sourceMappingURL=Avatar.styles.d.ts.map

dist/mantine-core/src/Badge/Badge.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 export declare const BADGE_SIZES: Record<MantineSize, number>;
-interface BadgeProps extends DefaultProps {
+export interface BadgeProps extends DefaultProps {
     /** Badge color from theme */
@@ -26,3 +26,2 @@ color?: string;
 }
-export {};
 //# sourceMappingURL=Badge.d.ts.map

dist/mantine-core/src/Badge/Badge.styles.d.ts

@@ -10,6 +10,4 @@ import { MantineTheme, MantineSize, MantineNumberSize } from "../../../mantine-theme/src";
 export declare const heights: Record<MantineSize, number>;
-declare const _default: (data?: BadgeStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"outline" | "light" | "filled" | "rightSection" | "inner" | "leftSection" | "badge">;
+declare const _default: (args?: BadgeStylesProps) => import("jss").Classes<"outline" | "light" | "filled" | "rightSection" | "inner" | "leftSection" | "badge">;
 export default _default;
 //# sourceMappingURL=Badge.styles.d.ts.map

dist/mantine-core/src/Blockquote/Blockquote.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface BlockquoteProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'blockquote'>, 'cite'> {
+export interface BlockquoteProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'blockquote'>, 'cite'> {
     /** Border and icon color from theme */
@@ -15,3 +15,2 @@ color?: string;
 }
-export {};
 //# sourceMappingURL=Blockquote.d.ts.map

dist/mantine-core/src/Blockquote/Blockquote.styles.d.ts

@@ -6,6 +6,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: BlockquoteStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"blockquote" | "body" | "cite" | "icon" | "inner">;
+declare const _default: (args?: BlockquoteStylesProps) => import("jss").Classes<"blockquote" | "body" | "cite" | "icon" | "inner">;
 export default _default;
 //# sourceMappingURL=Blockquote.styles.d.ts.map

dist/mantine-core/src/Breadcrumbs/Breadcrumbs.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface BreadcrumbsProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface BreadcrumbsProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Separator between breadcrumbs */
@@ -13,3 +13,2 @@ separator?: React.ReactNode;
 }
-export {};
 //# sourceMappingURL=Breadcrumbs.d.ts.map

dist/mantine-core/src/Breadcrumbs/Breadcrumbs.styles.d.ts

@@ -1,9 +0,3 @@
-import { MantineTheme } from "../../../mantine-theme/src";
-interface BreadcrumbsStylesProps {
-    theme: MantineTheme;
-}
-declare const _default: (data?: BreadcrumbsStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"separator" | "breadcrumbs" | "breadcrumb">;
+declare const _default: (args?: unknown) => import("jss").Classes<"separator" | "breadcrumbs" | "breadcrumb">;
 export default _default;
 //# sourceMappingURL=Breadcrumbs.styles.d.ts.map

dist/mantine-core/src/Burger/Burger.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 };
-interface BurgerProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {
+export interface BurgerProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {
     /** Burger state: true for cross, false for burger */
@@ -25,3 +25,2 @@ opened: boolean;
 }
-export {};
 //# sourceMappingURL=Burger.d.ts.map

dist/mantine-core/src/Burger/Burger.styles.d.ts

@@ -15,6 +15,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 };
-declare const _default: (data?: BurgerStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"wrapper" | "opened" | "burger">;
+declare const _default: (args?: BurgerStylesProps) => import("jss").Classes<"opened" | "wrapper" | "burger">;
 export default _default;
 //# sourceMappingURL=Burger.styles.d.ts.map

dist/mantine-core/src/Button/Button.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 export declare const BUTTON_SIZES: import("../../../mantine-theme/src").MantineSizes;
-interface ButtonBaseProps extends DefaultProps {
+export interface ButtonBaseProps extends DefaultProps {
     /** Predefined button size */
@@ -31,3 +31,3 @@ size?: MantineSize;
 }
-export {};
+export declare type ButtonProps = React.ComponentProps<typeof Button>;
 //# sourceMappingURL=Button.d.ts.map

dist/mantine-core/src/Button/Button.styles.d.ts

@@ -10,6 +10,4 @@ import { MantineTheme, MantineSize, MantineNumberSize, MantineSizes } from "../../../mantine-theme/src";
 export declare const heights: MantineSizes;
-declare const _default: (data?: ButtonStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"label" | "link" | "outline" | "light" | "filled" | "icon" | "inner" | "leftIcon" | "rightIcon" | "shared">;
+declare const _default: (args?: ButtonStylesProps) => import("jss").Classes<"label" | "link" | "outline" | "light" | "filled" | "icon" | "inner" | "leftIcon" | "rightIcon" | "shared">;
 export default _default;
 //# sourceMappingURL=Button.styles.d.ts.map

dist/mantine-core/src/Card/Card.d.ts

@@ -5,3 +5,4 @@ import React from 'react';
 export { CardsGrid } from './CardsGrid/CardsGrid';
-interface CardProps extends DefaultProps, React.ComponentPropsWithoutRef<typeof Paper> {
+export type { CardsGridProps } from './CardsGrid/CardsGrid';
+export interface CardProps extends DefaultProps, React.ComponentPropsWithoutRef<typeof Paper> {
 }
@@ -8,0 +9,0 @@ export declare function Card({ className, themeOverride, padding, radius, ...others }: CardProps): JSX.Element;

dist/mantine-core/src/Card/Card.styles.d.ts

@@ -7,6 +7,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: CardStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"card">;
+declare const _default: (args?: CardStylesProps) => import("jss").Classes<"card">;
 export default _default;
 //# sourceMappingURL=Card.styles.d.ts.map

dist/mantine-core/src/Card/CardsGrid/CardsGrid.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../../mantine-theme/src";
-interface CardsGridProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface CardsGridProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Space between cards, predefined value from theme.spacing or number for margins in px */
@@ -17,3 +17,2 @@ gutter?: MantineNumberSize;
 }
-export {};
 //# sourceMappingURL=CardsGrid.d.ts.map

dist/mantine-core/src/Card/CardsGrid/CardsGrid.styles.d.ts

@@ -8,6 +8,4 @@ import { MantineNumberSize, MantineTheme } from "../../../../mantine-theme/src";
 }
-declare const _default: (data?: CardsGridStyles & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"grid">;
+declare const _default: (args?: CardsGridStyles) => import("jss").Classes<"grid">;
 export default _default;
 //# sourceMappingURL=CardsGrid.styles.d.ts.map

dist/mantine-core/src/Checkbox/Checkbox.d.ts

@@ -10,4 +10,4 @@ import React from 'react';
 };
-interface CheckboxProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
-    /** Checkbox checked and intermediate state color from theme, defaults to theme.primaryColor */
+export interface CheckboxProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
+    /** Checkbox checked and indeterminate state color from theme, defaults to theme.primaryColor */
     color?: string;
@@ -18,4 +18,4 @@ /** Predefined label font-size and checkbox width and height in px */
     label?: React.ReactNode;
-    /** Intermediate state of checkbox, overwrites checked */
-    intermediate?: boolean;
+    /** Indeterminate state of checkbox, overwrites checked */
+    indeterminate?: boolean;
     /** Style properties added to input element */
@@ -32,7 +32,6 @@ inputStyle?: React.CSSProperties;
 }
-export declare function Checkbox({ className, checked, onChange, color, themeOverride, label, disabled, intermediate, id, size, wrapperProps, style, inputStyle, inputClassName, elementRef, ...others }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ className, checked, onChange, color, themeOverride, label, disabled, indeterminate, id, size, wrapperProps, style, inputStyle, inputClassName, elementRef, children, ...others }: CheckboxProps): JSX.Element;
 export declare namespace Checkbox {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=Checkbox.d.ts.map

dist/mantine-core/src/Checkbox/Checkbox.styles.d.ts

@@ -14,6 +14,4 @@ import { MantineTheme, MantineSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: CheckboxStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"label" | "wrapper" | "checkbox" | "icon" | "checkboxWrapper">;
+declare const _default: (args?: CheckboxStylesProps) => import("jss").Classes<"label" | "checkbox" | "icon" | "wrapper" | "checkboxWrapper">;
 export default _default;
 //# sourceMappingURL=Checkbox.styles.d.ts.map

dist/mantine-core/src/Checkbox/CheckboxIcon.d.ts

 import React from 'react';
 interface CheckboxIconProps extends React.ComponentPropsWithoutRef<'svg'> {
-    intermediate: boolean;
+    indeterminate: boolean;
 }
-export declare function CheckboxIcon({ intermediate, ...others }: CheckboxIconProps): JSX.Element;
+export declare function CheckboxIcon({ indeterminate, ...others }: CheckboxIconProps): JSX.Element;
 export {};
 //# sourceMappingURL=CheckboxIcon.d.ts.map

dist/mantine-core/src/Code/Code.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface CodeProps extends DefaultProps, React.ComponentPropsWithoutRef<'code'> {
+export interface CodeProps extends DefaultProps, React.ComponentPropsWithoutRef<'code'> {
     /** Code content */
@@ -15,3 +15,2 @@ children: React.ReactNode;
 }
-export {};
 //# sourceMappingURL=Code.d.ts.map

dist/mantine-core/src/Code/Code.styles.d.ts

@@ -6,6 +6,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: CodeStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"code" | "pre">;
+declare const _default: (args?: CodeStylesProps) => import("jss").Classes<"code" | "pre">;
 export default _default;
 //# sourceMappingURL=Code.styles.d.ts.map

dist/mantine-core/src/ColorSwatch/ColorSwatch.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
 import { ComponentPassThrough } from "../../../mantine-types/src";
-interface ColorSwatchProps extends DefaultProps {
+export interface ColorSwatchProps extends DefaultProps {
     /** Swatch color value in any css valid format (hex, rgb, etc.) */
@@ -19,3 +19,2 @@ color: string;
 }
-export {};
 //# sourceMappingURL=ColorSwatch.d.ts.map

dist/mantine-core/src/ColorSwatch/ColorSwatch.styles.d.ts

@@ -6,6 +6,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: ColorSwatchStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"colorSwatch">;
+declare const _default: (args?: ColorSwatchStylesProps) => import("jss").Classes<"colorSwatch">;
 export default _default;
 //# sourceMappingURL=ColorSwatch.styles.d.ts.map

dist/mantine-core/src/Container/Container.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 };
-interface ContainerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface ContainerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Predefined container max-width or number for max-width in px */
@@ -23,3 +23,2 @@ size?: MantineNumberSize;
 }
-export {};
 //# sourceMappingURL=Container.d.ts.map

dist/mantine-core/src/Container/Container.styles.d.ts

@@ -15,6 +15,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 };
-declare const _default: (data?: ContainerStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"container">;
+declare const _default: (args?: ContainerStylesProps) => import("jss").Classes<"container">;
 export default _default;
 //# sourceMappingURL=Container.styles.d.ts.map

dist/mantine-core/src/Drawer/Drawer.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
 };
-interface DrawerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface DrawerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** If true drawer is mounted to the dom */
@@ -31,3 +31,3 @@ opened: boolean;
     /** Disables scroll lock */
-    noScrollScroll?: boolean;
+    noScrollLock?: boolean;
     /** Disable onClock trigger for outside events */
@@ -50,7 +50,7 @@ noCloseOnClickOutside?: boolean;
 }
-export declare function Drawer({ opened, onClose, className, themeOverride, position, size, noFocusTrap, noScrollScroll, noCloseOnClickOutside, noCloseOnEscape, transition, transitionDuration, transitionTimingFunction, zIndex, overlayColor, overlayOpacity, children, noOverlay, shadow, padding, ...others }: DrawerProps): JSX.Element;
+export declare function MantineDrawer({ opened, onClose, className, themeOverride, position, size, noFocusTrap, noScrollLock, noCloseOnClickOutside, noCloseOnEscape, transition, transitionDuration, transitionTimingFunction, zIndex, overlayColor, overlayOpacity, children, noOverlay, shadow, padding, ...others }: DrawerProps): JSX.Element;
+export declare function Drawer(props: React.ComponentPropsWithoutRef<typeof MantineDrawer>): JSX.Element;
 export declare namespace Drawer {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=Drawer.d.ts.map

dist/mantine-core/src/Drawer/Drawer.styles.d.ts

@@ -16,6 +16,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: DrawerStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"wrapper" | "noOverlay" | "drawer">;
+declare const _default: (args?: DrawerStylesProps) => import("jss").Classes<"wrapper" | "noOverlay" | "drawer">;
 export default _default;
 //# sourceMappingURL=Drawer.styles.d.ts.map

dist/mantine-core/src/Highlight/Highlight.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 };
-interface HighlightProps extends DefaultProps, Omit<TextProps, 'children'> {
+export interface HighlightProps extends DefaultProps, Omit<TextProps, 'children'> {
     /** String part to highligh in children */
@@ -23,3 +23,2 @@ highlight: string;
 }
-export {};
 //# sourceMappingURL=Highlight.d.ts.map

dist/mantine-core/src/Image/Image.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-interface ImageProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {
+export interface ImageProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'placeholder'> {
     /** Image src */
@@ -31,3 +31,2 @@ src?: string;
 }
-export {};
 //# sourceMappingURL=Image.d.ts.map

dist/mantine-core/src/Image/Image.styles.d.ts

@@ -6,6 +6,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: ImageStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"image" | "wrapper" | "placeholderIcon">;
+declare const _default: (args?: ImageStylesProps) => import("jss").Classes<"image" | "wrapper" | "placeholderIcon">;
 export default _default;
 //# sourceMappingURL=Image.styles.d.ts.map

dist/mantine-core/src/index.d.ts

 export * from "../../mantine-theme/src";
-export type { InputProps } from './Input/Input';
-export type { InputWrapperBaseProps } from './InputWrapper/InputWrapper';
-export type { MantineTransition } from './Transition/Transition';
+export * from "../../mantine-utils/src";
 export { ActionIcon, ACTION_ICON_SIZES } from './ActionIcon/ActionIcon';
@@ -13,3 +11,3 @@ export { Alert } from './Alert/Alert';
 export { Button, BUTTON_SIZES } from './Button/Button';
-export { Card, CardsGrid } from './Card/Card';
+export { Card } from './Card/Card';
 export { Checkbox, CHECKBOX_SIZES } from './Checkbox/Checkbox';
@@ -20,5 +18,6 @@ export { Code } from './Code/Code';
 export { Drawer, DRAWER_SIZES } from './Drawer/Drawer';
-export { ElementsGroup } from './ElementsGroup/ElementsGroup';
+export { Divider, DIVIDER_SIZES } from './Divider/Divider';
+export { Grid, Col } from './Grid/Grid';
+export { Group } from './Group/Group';
 export { Highlight } from './Highlight/Highlight';
-export { Hr, HR_SIZES } from './Hr/Hr';
 export { Image } from './Image/Image';
@@ -37,5 +36,7 @@ export { Input } from './Input/Input';
 export { PasswordInput } from './PasswordInput/PasswordInput';
+export { Popover } from './Popover/Popover';
 export { Portal } from './Portal/Portal';
 export { Progress, PROGRESS_SIZES } from './Progress/Progress';
 export { RadioGroup, Radio, RADIO_SIZES } from './RadioGroup/RadioGroup';
+export { SegmentedControl } from './SegmentedControl/SegmentedControl';
 export { Select } from './Select/Select';
@@ -54,2 +55,56 @@ export { Spoiler } from './Spoiler/Spoiler';
 export { TypographyStylesProvider } from './TypographyStylesProvider/TypographyStylesProvider';
+/** Deprecated – these components will be removed in next major release */
+export { Divider as Hr, DIVIDER_SIZES as HR_SIZES } from './Divider/Divider';
+export { Group as ElementsGroup } from './Group/Group';
+export { CardsGrid } from './Card/Card';
+export type { CardsGridProps } from './Card/Card';
+export type { ActionIconProps } from './ActionIcon/ActionIcon';
+export type { AlertProps } from './Alert/Alert';
+export type { AvatarProps } from './Avatar/Avatar';
+export type { BadgeProps } from './Badge/Badge';
+export type { BlockquoteProps } from './Blockquote/Blockquote';
+export type { BreadcrumbsProps } from './Breadcrumbs/Breadcrumbs';
+export type { BurgerProps } from './Burger/Burger';
+export type { ButtonProps } from './Button/Button';
+export type { CardProps } from './Card/Card';
+export type { CheckboxProps } from './Checkbox/Checkbox';
+export type { CodeProps } from './Code/Code';
+export type { ColorSwatchProps } from './ColorSwatch/ColorSwatch';
+export type { ContainerProps } from './Container/Container';
+export type { DrawerProps } from './Drawer/Drawer';
+export type { DividerProps } from './Divider/Divider';
+export type { GridProps, ColProps } from './Grid/Grid';
+export type { GroupProps } from './Group/Group';
+export type { HighlightProps } from './Highlight/Highlight';
+export type { ImageProps } from './Image/Image';
+export type { InputProps } from './Input/Input';
+export type { InputWrapperBaseProps, InputWrapperProps } from './InputWrapper/InputWrapper';
+export type { KbdProps } from './Kbd/Kbd';
+export type { LoaderProps } from './Loader/Loader';
+export type { LoadingOverlayProps } from './LoadingOverlay/LoadingOverlay';
+export type { MenuProps, MenuItemProps, MenuBodyProps } from './Menu/Menu';
+export type { ModalProps } from './Modal/Modal';
+export type { NotificationProps } from './Notification/Notification';
+export type { NumberInputProps } from './NumberInput/NumberInput';
+export type { OverlayProps } from './Overlay/Overlay';
+export type { PaperProps } from './Paper/Paper';
+export type { PasswordInputProps } from './PasswordInput/PasswordInput';
+export type { PopoverProps } from './Popover/Popover';
+export type { PortalProps } from './Portal/Portal';
+export type { ProgressProps } from './Progress/Progress';
+export type { RadioGroupProps, RadioProps } from './RadioGroup/RadioGroup';
+export type { SegmentedControlProps } from './SegmentedControl/SegmentedControl';
+export type { SelectProps } from './Select/Select';
+export type { SpoilerProps } from './Spoiler/Spoiler';
+export type { SwitchProps } from './Switch/Switch';
+export type { TableProps } from './Table/Table';
+export type { TabsProps, TabProps } from './Tabs/Tabs';
+export type { TextProps, AnchorProps } from './Text/Text';
+export type { TextareaProps } from './Textarea/Textarea';
+export type { TextInputProps } from './TextInput/TextInput';
+export type { ThemeIconProps } from './ThemeIcon/ThemeIcon';
+export type { TitleProps } from './Title/Title';
+export type { TooltipProps } from './Tooltip/Tooltip';
+export type { MantineTransition, TransitionProps, GroupedTransitionProps, } from './Transition/Transition';
+export type { TypographyStylesProviderProps } from './TypographyStylesProvider/TypographyStylesProvider';
 //# sourceMappingURL=index.d.ts.map

dist/mantine-core/src/Input/Input.styles.d.ts

@@ -6,6 +6,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: InputStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"input" | "icon" | "rightSection" | "invalid" | "withIcon" | "inputWrapper" | "defaultVariant" | "filledVariant" | "unstyledVariant">;
+declare const _default: (args?: InputStylesProps) => import("jss").Classes<"input" | "icon" | "rightSection" | "invalid" | "withIcon" | "inputWrapper" | "defaultVariant" | "filledVariant" | "unstyledVariant">;
 export default _default;
 //# sourceMappingURL=Input.styles.d.ts.map

dist/mantine-core/src/InputWrapper/InputWrapper.d.ts

@@ -13,3 +13,3 @@ import React from 'react';
 }
-interface InputWrapperProps extends DefaultProps, InputWrapperBaseProps, React.ComponentPropsWithoutRef<'div'> {
+export interface InputWrapperProps extends DefaultProps, InputWrapperBaseProps, React.ComponentPropsWithoutRef<'div'> {
     /** Input that should be wrapped */
@@ -26,3 +26,2 @@ children: React.ReactNode;
 }
-export {};
 //# sourceMappingURL=InputWrapper.d.ts.map

dist/mantine-core/src/InputWrapper/InputWrapper.styles.d.ts

@@ -1,9 +0,3 @@
-import { MantineTheme } from "../../../mantine-theme/src";
-interface InputWrapperStylesProps {
-    theme: MantineTheme;
-}
-declare const _default: (data?: InputWrapperStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"label" | "required" | "error" | "inputWrapper" | "description">;
+declare const _default: (args?: unknown) => import("jss").Classes<"label" | "required" | "error" | "inputWrapper" | "description">;
 export default _default;
 //# sourceMappingURL=InputWrapper.styles.d.ts.map

dist/mantine-core/src/Kbd/Kbd.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface KbdProps extends DefaultProps, React.ComponentPropsWithoutRef<'kbd'> {
+export interface KbdProps extends DefaultProps, React.ComponentPropsWithoutRef<'kbd'> {
     /** Keyboard key */
@@ -11,3 +11,2 @@ children: React.ReactNode;
 }
-export {};
 //# sourceMappingURL=Kbd.d.ts.map

dist/mantine-core/src/Kbd/Kbd.styles.d.ts

@@ -1,9 +0,3 @@
-import { MantineTheme } from "../../../mantine-theme/src";
-interface KbdStylesProps {
-    theme: MantineTheme;
-}
-declare const _default: (data?: KbdStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"kbd">;
+declare const _default: (args?: unknown) => import("jss").Classes<"kbd">;
 export default _default;
 //# sourceMappingURL=Kbd.styles.d.ts.map

dist/mantine-core/src/LoadingOverlay/LoadingOverlay.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
 import { LoaderProps } from '../Loader/Loader';
-interface LoadingOverlayProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface LoadingOverlayProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+    /** Provide custom loader */
+    loader?: React.ReactNode;
     /** Loader component props */
@@ -18,7 +20,6 @@ loaderProps?: LoaderProps;
 }
-export declare function LoadingOverlay({ className, visible, loaderProps, overlayOpacity, overlayColor, themeOverride, transitionDuration, zIndex, style, ...others }: LoadingOverlayProps): JSX.Element;
+export declare function LoadingOverlay({ className, visible, loaderProps, overlayOpacity, overlayColor, themeOverride, transitionDuration, zIndex, style, loader, ...others }: LoadingOverlayProps): JSX.Element;
 export declare namespace LoadingOverlay {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=LoadingOverlay.d.ts.map

dist/mantine-core/src/Menu/Menu.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
 import { MantineTransition } from '../Transition/Transition';
-import { MenuBody } from './MenuBody/MenuBody';
-import { MenuItem } from './MenuItem/MenuItem';
+import { MenuBody, MenuBodyProps } from './MenuBody/MenuBody';
+import { MenuItem, MenuItemProps } from './MenuItem/MenuItem';
 export { MenuBody, MenuItem };
+export type { MenuBodyProps, MenuItemProps };
 export declare const MENU_SIZES: {
@@ -20,4 +21,4 @@ xs: number;
 }
-interface MenuProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
-    /** <MenuItem /> and <Hr /> components only, children are passed to MenuBody component  */
+export interface MenuProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+    /** <MenuItem /> and <Divider /> components only, children are passed to MenuBody component  */
     children: React.ReactNode;
@@ -24,0 +25,0 @@ /** React element that will be used as menu control */

dist/mantine-core/src/Menu/MenuBody/MenuBody.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../../mantine-theme/src";
 import { MantineTransition } from '../../Transition/Transition';
-interface MenuBodyProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface MenuBodyProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** When true menu is mounted to the dom */
@@ -9,3 +9,3 @@ opened: boolean;
     onClose(): void;
-    /** <MenuItem /> and <Hr /> components only */
+    /** <MenuItem /> and <Divider /> components only */
     children: React.ReactNode;
@@ -33,3 +33,2 @@ /** Transition styles */
 }
-export {};
 //# sourceMappingURL=MenuBody.d.ts.map

dist/mantine-core/src/Menu/MenuBody/MenuBody.styles.d.ts

@@ -13,6 +13,4 @@ import { MantineNumberSize, MantineTheme } from "../../../../mantine-theme/src";
 };
-declare const _default: (data?: MenuStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"hr" | "menu">;
+declare const _default: (args?: MenuStylesProps) => import("jss").Classes<"hr" | "menu">;
 export default _default;
 //# sourceMappingURL=MenuBody.styles.d.ts.map

dist/mantine-core/src/Menu/MenuButton/MenuButton.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../../mantine-theme/src";
+import { ComponentPassThrough } from "../../../../mantine-types/src";
 import { MenuItemProps } from '../MenuItem/MenuItem';
-interface MenuButtonProps extends DefaultProps, MenuItemProps {
+export interface MenuButtonProps extends DefaultProps, MenuItemProps {
     children: React.ReactNode;
@@ -9,8 +10,8 @@ hovered: boolean;
     elementRef(node: HTMLButtonElement): void;
+    component?: any;
 }
-export declare function MenuButton({ children, onHover, hovered, themeOverride, elementRef, icon, color, disabled, rightSection, className, ...others }: MenuButtonProps): JSX.Element;
+export declare function MenuButton<T extends React.ElementType = 'button'>({ children, onHover, hovered, themeOverride, elementRef, icon, color, disabled, rightSection, className, component: Element, ...others }: ComponentPassThrough<T, MenuButtonProps>): JSX.Element;
 export declare namespace MenuButton {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=MenuButton.d.ts.map

dist/mantine-core/src/Menu/MenuButton/MenuButton.styles.d.ts

@@ -6,6 +6,4 @@ import { MantineTheme } from "../../../../mantine-theme/src";
 }
-declare const _default: (data?: MenuButtonStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"body" | "label" | "hovered" | "icon" | "item" | "inner">;
+declare const _default: (args?: MenuButtonStylesProps) => import("jss").Classes<"body" | "label" | "hovered" | "icon" | "item" | "inner">;
 export default _default;
 //# sourceMappingURL=MenuButton.styles.d.ts.map

dist/mantine-core/src/Menu/MenuItem/MenuItem.d.ts

 import React from 'react';
+import { ComponentPassThrough } from "../../../../mantine-types/src";
 export interface MenuItemProps extends React.ComponentPropsWithoutRef<'button'> {
@@ -17,3 +18,3 @@ /** Item label */
 }
-export declare function MenuItem(props: MenuItemProps): any;
+export declare function MenuItem<T extends React.ElementType = 'button'>(props: ComponentPassThrough<T, MenuItemProps>): any;
 export declare namespace MenuItem {
@@ -20,0 +21,0 @@ var displayName: string;

dist/mantine-core/src/Modal/Modal.d.ts

@@ -12,3 +12,3 @@ import React from 'react';
 };
-interface ModalProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+export interface ModalProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
     /** Mounts modal if true */
@@ -43,7 +43,7 @@ opened: boolean;
 }
-export declare function Modal({ className, opened, themeOverride, title, onClose, children, hideCloseButton, overlayOpacity, size, transitionDuration, closeButtonLabel, overlayColor, zIndex, overflow, transition, id, ...others }: ModalProps): JSX.Element;
+export declare function MantineModal({ className, opened, themeOverride, title, onClose, children, hideCloseButton, overlayOpacity, size, transitionDuration, closeButtonLabel, overlayColor, zIndex, overflow, transition, id, ...others }: ModalProps): JSX.Element;
+export declare function Modal(props: React.ComponentPropsWithoutRef<typeof MantineModal>): JSX.Element;
 export declare namespace Modal {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=Modal.d.ts.map

dist/mantine-core/src/Modal/Modal.styles.d.ts

@@ -15,6 +15,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: ModalStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"body" | "header" | "title" | "wrapper" | "inner" | "modal">;
+declare const _default: (args?: ModalStylesProps) => import("jss").Classes<"body" | "header" | "title" | "wrapper" | "inner" | "modal">;
 export default _default;
 //# sourceMappingURL=Modal.styles.d.ts.map

dist/mantine-core/src/Notification/Notification.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface NotificationProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
+export interface NotificationProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
     /** Called when close button is clicked */
@@ -25,3 +25,2 @@ onClose(): void;
 }
-export {};
 //# sourceMappingURL=Notification.d.ts.map

dist/mantine-core/src/Notification/Notification.styles.d.ts

@@ -7,6 +7,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: NotificationStyles & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"body" | "title" | "icon" | "withIcon" | "description" | "notification" | "loader">;
+declare const _default: (args?: NotificationStyles) => import("jss").Classes<"body" | "title" | "icon" | "withIcon" | "description" | "loader" | "notification">;
 export default _default;
 //# sourceMappingURL=Notification.styles.d.ts.map

dist/mantine-core/src/NumberInput/NumberInput.d.ts

 import React from 'react';
 import { TextInput } from '../TextInput/TextInput';
-interface NumberInputProps extends Omit<React.ComponentPropsWithoutRef<typeof TextInput>, 'rightSection' | 'rightSectionProps' | 'rightSectionWidth' | 'onChange' | 'value'> {
+export interface NumberInputProps extends Omit<React.ComponentPropsWithoutRef<typeof TextInput>, 'rightSection' | 'rightSectionProps' | 'rightSectionWidth' | 'onChange' | 'value'> {
     /** onChange input handler for controlled variant, note that input event is not exposed */
@@ -27,3 +27,2 @@ onChange?(value: number): void;
 }
-export {};
 //# sourceMappingURL=NumberInput.d.ts.map

dist/mantine-core/src/NumberInput/NumberInput.styles.d.ts

@@ -7,6 +7,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 export declare const CONTROL_WIDTH = 24;
-declare const _default: (data?: NumberInputStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"rightSection" | "control" | "controlUp" | "controlDown">;
+declare const _default: (args?: NumberInputStylesProps) => import("jss").Classes<"control" | "rightSection" | "controlUp" | "controlDown">;
 export default _default;
 //# sourceMappingURL=NumberInput.styles.d.ts.map

dist/mantine-core/src/Overlay/Overlay.d.ts

 import React from 'react';
 import { ComponentPassThrough } from "../../../mantine-types/src";
-interface OverlayProps {
+export interface OverlayProps {
     /** Overlay opacity */
@@ -15,3 +15,2 @@ opacity?: React.CSSProperties['opacity'];
 }
-export {};
 //# sourceMappingURL=Overlay.d.ts.map

dist/mantine-core/src/Paper/Paper.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize } from "../../../mantine-theme/src";
-interface PaperProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface PaperProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Predefined padding value from theme.spacing or number for padding in px */
@@ -17,3 +17,2 @@ padding?: MantineNumberSize;
 }
-export {};
 //# sourceMappingURL=Paper.d.ts.map

dist/mantine-core/src/Paper/Paper.styles.d.ts

@@ -8,6 +8,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: PaperStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"paper">;
+declare const _default: (args?: PaperStylesProps) => import("jss").Classes<"paper">;
 export default _default;
 //# sourceMappingURL=Paper.styles.d.ts.map

dist/mantine-core/src/PasswordInput/PasswordInput.d.ts

 import React from 'react';
 import { TextInput } from '../TextInput/TextInput';
-interface PasswordInputProps extends Omit<React.ComponentPropsWithoutRef<typeof TextInput>, 'rightSection' | 'rightSectionProps' | 'rightSectionWidth'> {
+export interface PasswordInputProps extends Omit<React.ComponentPropsWithoutRef<typeof TextInput>, 'rightSection' | 'rightSectionProps' | 'rightSectionWidth'> {
     /** Title for visibility toggle button in hidden state */
@@ -15,3 +15,2 @@ showPasswordLabel?: string;
 }
-export {};
 //# sourceMappingURL=PasswordInput.d.ts.map

dist/mantine-core/src/PasswordInput/PasswordToggleIcon.d.ts

 import React from 'react';
-interface PasswordToggleIconProps extends React.ComponentPropsWithoutRef<'svg'> {
+export interface PasswordToggleIconProps extends React.ComponentPropsWithoutRef<'svg'> {
     reveal: boolean;
 }
 export declare function PasswordToggleIcon({ reveal, ...others }: PasswordToggleIconProps): JSX.Element;
-export {};
 //# sourceMappingURL=PasswordToggleIcon.d.ts.map

dist/mantine-core/src/Progress/Progress.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 };
-interface ProgressProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface ProgressProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Percent of filled bar (0-100) */
@@ -27,3 +27,2 @@ value: number;
 }
-export {};
 //# sourceMappingURL=Progress.d.ts.map

dist/mantine-core/src/Progress/Progress.styles.d.ts

@@ -17,6 +17,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: ProgressStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"progress" | "bar">;
+declare const _default: (args?: ProgressStylesProps) => import("jss").Classes<"progress" | "bar">;
 export default _default;
 //# sourceMappingURL=Progress.styles.d.ts.map

dist/mantine-core/src/RadioGroup/Radio/Radio.d.ts

 import React from 'react';
 import { DefaultProps, MantineSize } from "../../../../mantine-theme/src";
-interface RadioProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
+export interface RadioProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {
     /** Radio label */
@@ -19,3 +19,2 @@ children: React.ReactNode;
 }
-export {};
 //# sourceMappingURL=Radio.d.ts.map

dist/mantine-core/src/RadioGroup/Radio/Radio.styles.d.ts

@@ -14,6 +14,4 @@ import { MantineTheme, MantineSize } from "../../../../mantine-theme/src";
 };
-declare const _default: (data?: RadioStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"label" | "labelDisabled" | "wrapper" | "radio">;
+declare const _default: (args?: RadioStylesProps) => import("jss").Classes<"label" | "radio" | "wrapper" | "labelDisabled">;
 export default _default;
 //# sourceMappingURL=Radio.styles.d.ts.map

dist/mantine-core/src/RadioGroup/RadioGroup.d.ts

 import React from 'react';
 import { DefaultProps, MantineNumberSize, MantineSize } from "../../../mantine-theme/src";
 import { InputWrapperBaseProps } from '../InputWrapper/InputWrapper';
-import { Radio } from './Radio/Radio';
+import { Radio, RadioProps } from './Radio/Radio';
+export { Radio };
+export type { RadioProps };
 export declare const RADIO_SIZES: {
@@ -12,4 +14,3 @@ xs: number;
 };
-export { Radio };
-interface RadioGroupProps extends DefaultProps, InputWrapperBaseProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
+export interface RadioGroupProps extends DefaultProps, InputWrapperBaseProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
     /** <Radio /> components only */
@@ -16,0 +17,0 @@ children: React.ReactNode;

dist/mantine-core/src/RadioGroup/RadioGroup.styles.d.ts

@@ -7,6 +7,4 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: RadioGroupStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"wrapper">;
+declare const _default: (args?: RadioGroupStylesProps) => import("jss").Classes<"wrapper">;
 export default _default;
 //# sourceMappingURL=RadioGroup.styles.d.ts.map

dist/mantine-core/src/Select/Select.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 }
-interface SelectProps extends DefaultProps, InputWrapperBaseProps, Omit<InputProps, 'rightSection' | 'rightSectionWidth' | 'rightSectionProps'>, React.ComponentPropsWithoutRef<'select'> {
+export interface SelectProps extends DefaultProps, InputWrapperBaseProps, Omit<InputProps, 'rightSection' | 'rightSectionWidth' | 'rightSectionProps'>, React.ComponentPropsWithoutRef<'select'> {
     /** id is used to bind input and label, if not passed unique id will be generated for each input */
@@ -13,0 +13,0 @@ id?: string;

dist/mantine-core/src/Spoiler/Spoiler.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface SpoilerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface SpoilerProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Max height of visible content, when this point is reached spoiler appears */
@@ -19,3 +19,2 @@ maxHeight: number;
 }
-export {};
 //# sourceMappingURL=Spoiler.d.ts.map

dist/mantine-core/src/Spoiler/Spoiler.styles.d.ts

@@ -6,6 +6,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: SpoilerStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"content" | "spoiler">;
+declare const _default: (args?: SpoilerStylesProps) => import("jss").Classes<"content" | "spoiler">;
 export default _default;
 //# sourceMappingURL=Spoiler.styles.d.ts.map

dist/mantine-core/src/Switch/Switch.d.ts

@@ -7,3 +7,3 @@ import React from 'react';
 }>;
-interface SwitchProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
+export interface SwitchProps extends DefaultProps, Omit<React.ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
     /** Id is used to bind input and label, if not passed unique id will be generated for each input */
@@ -28,7 +28,6 @@ id?: string;
 }
-export declare function Switch({ className, color, label, id, style, size, radius, themeOverride, wrapperProps, inputStyle, inputClassName, elementRef, ...others }: SwitchProps): JSX.Element;
+export declare function Switch({ className, color, label, id, style, size, radius, themeOverride, wrapperProps, inputStyle, inputClassName, elementRef, children, ...others }: SwitchProps): JSX.Element;
 export declare namespace Switch {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=Switch.d.ts.map

dist/mantine-core/src/Switch/Switch.styles.d.ts

@@ -13,6 +13,4 @@ import { MantineTheme, MantineNumberSize, MantineSize } from "../../../mantine-theme/src";
 }>;
-declare const _default: (data?: SwitchStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"label" | "switch" | "wrapper">;
+declare const _default: (args?: SwitchStylesProps) => import("jss").Classes<"label" | "switch" | "wrapper">;
 export default _default;
 //# sourceMappingURL=Switch.styles.d.ts.map

dist/mantine-core/src/Table/Table.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface TableProps extends DefaultProps, React.ComponentPropsWithoutRef<'table'> {
+export interface TableProps extends DefaultProps, React.ComponentPropsWithoutRef<'table'> {
     /** If true every odd row of table will have gray background color */
@@ -15,3 +15,2 @@ striped?: boolean;
 }
-export {};
 //# sourceMappingURL=Table.d.ts.map

dist/mantine-core/src/Table/Table.styles.d.ts

@@ -6,6 +6,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: TableStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"table" | "striped" | "hover">;
+declare const _default: (args?: TableStylesProps) => import("jss").Classes<"table" | "striped" | "hover">;
 export default _default;
 //# sourceMappingURL=Table.styles.d.ts.map

dist/mantine-core/src/Tabs/TabControl/TabControl.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../../mantine-theme/src";
 import { TabProps } from '../Tab/Tab';
-interface TabControlProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {
+export interface TabControlProps extends DefaultProps, React.ComponentPropsWithoutRef<'button'> {
     active: boolean;
@@ -10,7 +10,6 @@ elementRef(node: HTMLButtonElement): void;
 }
-export declare function TabControl({ themeOverride, active, elementRef, tabProps, color, ...others }: TabControlProps): JSX.Element;
+export declare function TabControl({ themeOverride, active, elementRef, tabProps, color, className, ...others }: TabControlProps): JSX.Element;
 export declare namespace TabControl {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=TabControl.d.ts.map

dist/mantine-core/src/Tabs/TabControl/TabControl.styles.d.ts

@@ -7,6 +7,4 @@ import { MantineTheme } from "../../../../mantine-theme/src";
 }
-declare const _default: (data?: TabControlStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"tab" | "tabActive" | "tabInner" | "tabIcon">;
+declare const _default: (args?: TabControlStylesProps) => import("jss").Classes<"tab" | "tabActive" | "tabInner" | "tabIcon">;
 export default _default;
 //# sourceMappingURL=TabControl.styles.d.ts.map

dist/mantine-core/src/Tabs/Tabs.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-import { ElementsGroupPosition } from '../ElementsGroup/ElementsGroup';
-import { Tab } from './Tab/Tab';
+import { GroupPosition } from '../Group/Group';
+import { Tab, TabProps } from './Tab/Tab';
 export { Tab };
-interface TabsProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export type { TabProps };
+export interface TabsProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** <Tab /> components only */
@@ -18,3 +19,3 @@ children: React.ReactNode;
     /** tab controls position */
-    position?: ElementsGroupPosition;
+    position?: GroupPosition;
     /** called when tab control is clicked with tab index */
@@ -21,0 +22,0 @@ onTabChange?(tabIndex: number): void;

dist/mantine-core/src/Tabs/Tabs.styles.d.ts

@@ -1,9 +0,3 @@
-import { MantineTheme } from "../../../mantine-theme/src";
-interface TabsStylesProps {
-    theme: MantineTheme;
-}
-declare const _default: (data?: TabsStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"body" | "tabs" | "tabsInner">;
+declare const _default: (args?: unknown) => import("jss").Classes<"body" | "tabs" | "tabsInner">;
 export default _default;
 //# sourceMappingURL=Tabs.styles.d.ts.map

dist/mantine-core/src/Text/Text.d.ts

@@ -32,2 +32,3 @@ import React from 'react';
 }
+export declare type AnchorProps = React.ComponentProps<typeof Anchor>;
 //# sourceMappingURL=Text.d.ts.map

dist/mantine-core/src/Text/Text.styles.d.ts

@@ -9,6 +9,4 @@ import { MantineTheme, MantineSize } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: TextStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"text">;
+declare const _default: (args?: TextStylesProps) => import("jss").Classes<"text">;
 export default _default;
 //# sourceMappingURL=Text.styles.d.ts.map

dist/mantine-core/src/Textarea/Textarea.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 import { InputProps } from '../Input/Input';
-interface TextareaProps extends DefaultProps, InputWrapperBaseProps, InputProps, React.ComponentPropsWithoutRef<'textarea'> {
+export interface TextareaProps extends DefaultProps, InputWrapperBaseProps, InputProps, React.ComponentPropsWithoutRef<'textarea'> {
     /** Id is used to bind input and label, if not passed unique id will be generated for each input */
@@ -26,3 +26,2 @@ id?: string;
 }
-export {};
 //# sourceMappingURL=Textarea.d.ts.map

dist/mantine-core/src/TextInput/TextInput.d.ts

@@ -5,3 +5,3 @@ import React from 'react';
 import { InputWrapperBaseProps } from '../InputWrapper/InputWrapper';
-interface TextInputProps extends DefaultProps, InputProps, InputWrapperBaseProps, React.ComponentPropsWithoutRef<'input'> {
+export interface TextInputProps extends DefaultProps, InputProps, InputWrapperBaseProps, React.ComponentPropsWithoutRef<'input'> {
     /** id is used to bind input and label, if not passed unique id will be generated for each input */
@@ -22,3 +22,2 @@ id?: string;
 }
-export {};
 //# sourceMappingURL=TextInput.d.ts.map

dist/mantine-core/src/ThemeIcon/ThemeIcon.d.ts

@@ -6,2 +6,3 @@ import React from 'react';
     sm: number;
+    /** Icon */
     md: number;
@@ -11,3 +12,3 @@ lg: number;
 };
-interface ThemeIconProps extends DefaultProps, React.ComponentProps<'div'> {
+export interface ThemeIconProps extends DefaultProps, React.ComponentProps<'div'> {
     /** Icon */
@@ -28,3 +29,2 @@ children: React.ReactNode;
 }
-export {};
 //# sourceMappingURL=ThemeIcon.d.ts.map

dist/mantine-core/src/ThemeIcon/ThemeIcon.styles.d.ts

@@ -7,3 +7,2 @@ import { MantineTheme, MantineNumberSize } from "../../../mantine-theme/src";
     radius: MantineNumberSize;
-    variant: 'filled' | 'light';
 }
@@ -17,6 +16,4 @@ export declare const sizes: {
 };
-declare const _default: (data?: ThemeIconStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"themeIcon">;
+declare const _default: (args?: ThemeIconStylesProps) => import("jss").Classes<"light" | "filled" | "themeIcon">;
 export default _default;
 //# sourceMappingURL=ThemeIcon.styles.d.ts.map

dist/mantine-core/src/Title/Title.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface TitleProps extends DefaultProps, React.ComponentPropsWithoutRef<'h1'> {
+export interface TitleProps extends DefaultProps, React.ComponentPropsWithoutRef<'h1'> {
     /** Defines component and styles which will be used */
@@ -229,4 +229,2 @@ order?: 1 | 2 | 3 | 4 | 5 | 6;
     key?: React.Key;
-    translate?: "no" | "yes";
-    hidden?: boolean;
     defaultChecked?: boolean;
@@ -241,4 +239,6 @@ defaultValue?: string | number | readonly string[];
     draggable?: boolean | "true" | "false";
+    hidden?: boolean;
     placeholder?: string;
     spellCheck?: boolean | "true" | "false";
+    translate?: "no" | "yes";
     radioGroup?: string;
@@ -271,3 +271,2 @@ about?: string;
 }
-export {};
 //# sourceMappingURL=Title.d.ts.map

dist/mantine-core/src/Title/Title.styles.d.ts

@@ -7,6 +7,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: TitleStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"title">;
+declare const _default: (args?: TitleStylesProps) => import("jss").Classes<"title">;
 export default _default;
 //# sourceMappingURL=Title.styles.d.ts.map

dist/mantine-core/src/Tooltip/Tooltip.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
 import { MantineTransition } from '../Transition/Transition';
-interface TooltipProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface TooltipProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Tooltip content */
@@ -52,3 +52,2 @@ label: React.ReactNode;
 }
-export {};
 //# sourceMappingURL=Tooltip.d.ts.map

dist/mantine-core/src/Tooltip/Tooltip.styles.d.ts

@@ -8,6 +8,4 @@ import { MantineTheme } from "../../../mantine-theme/src";
 }
-declare const _default: (data?: TooltipStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"end" | "bottom" | "left" | "right" | "top" | "wrapper" | "center" | "start" | "tooltip" | "withArrow" | "tooltipInner">;
+declare const _default: (args?: TooltipStylesProps) => import("jss").Classes<"end" | "bottom" | "left" | "right" | "top" | "center" | "start" | "tooltip" | "withArrow" | "wrapper" | "tooltipInner">;
 export default _default;
 //# sourceMappingURL=Tooltip.styles.d.ts.map

dist/mantine-core/src/Transition/GroupedTransition.d.ts

@@ -9,3 +9,3 @@ import React from 'react';
 }
-interface GroupedTransitionProps extends Omit<DefaultProps, 'className'> {
+export interface GroupedTransitionProps extends Omit<DefaultProps, 'className'> {
     /** Transitions group */
@@ -12,0 +12,0 @@ transitions: Record<string, GroupedTransitionItem>;

dist/mantine-core/src/Transition/Transition.d.ts

@@ -5,5 +5,6 @@ import React from 'react';
 export { GroupedTransition } from './GroupedTransition';
+export type { GroupedTransitionProps } from './GroupedTransition';
 export declare const AVAILABLE_TRANSITIONS: import("./transitions").MantineTransitionName[];
 export type { MantineTransition };
-interface TransitionProps extends Omit<DefaultProps, 'className'> {
+export interface TransitionProps extends Omit<DefaultProps, 'className'> {
     /** Predefined transition name or transition styles */
@@ -10,0 +11,0 @@ transition: MantineTransition;

dist/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.d.ts

 import React from 'react';
 import { DefaultProps } from "../../../mantine-theme/src";
-interface TypographyStylesProviderProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
+export interface TypographyStylesProviderProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {
     /** Render any content to add Mantine typography styles */
@@ -11,3 +11,2 @@ children: React.ReactNode;
 }
-export {};
 //# sourceMappingURL=TypographyStylesProvider.d.ts.map

dist/mantine-core/src/TypographyStylesProvider/TypographyStylesProvider.styles.d.ts

@@ -1,9 +0,3 @@
-import { MantineTheme } from "../../../mantine-theme/src";
-interface InnerHtmlStylesProps {
-    theme: MantineTheme;
-}
-declare const _default: (data?: InnerHtmlStylesProps & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"innerHtml">;
+declare const _default: (args?: unknown) => import("jss").Classes<"innerHtml">;
 export default _default;
 //# sourceMappingURL=TypographyStylesProvider.styles.d.ts.map

dist/mantine-demos/src/AuthenticationForm/AuthenticationForm.d.ts

@@ -1,8 +0,9 @@
-interface AuthenticationFormProps {
+import React from 'react';
+export interface AuthenticationFormProps {
     noShadow?: boolean;
     noPadding?: boolean;
     noSubmit?: boolean;
+    style?: React.CSSProperties;
 }
-export declare function AuthenticationForm({ noShadow, noPadding, noSubmit }: AuthenticationFormProps): JSX.Element;
-export {};
+export declare function AuthenticationForm({ noShadow, noPadding, noSubmit, style, }: AuthenticationFormProps): JSX.Element;
 //# sourceMappingURL=AuthenticationForm.d.ts.map

dist/mantine-demos/src/index.d.ts

 export { AuthenticationForm } from './AuthenticationForm/AuthenticationForm';
 export { ColorInput } from './ColorInput/ColorInput';
-export { CountryCards } from './CountryCards/CountryCards';
-export { IntermediateCheckbox } from './IntermediateCheckbox/IntermediateCheckbox';
+export { EditUserPopover } from './EditUserPopover/EditUserPopover';
+export { IndeterminateCheckbox } from './IndeterminateCheckbox/IndeterminateCheckbox';
 export { JsonInput } from './JsonInput/JsonInput';
@@ -6,0 +6,0 @@ export { PasswordStrength } from './PasswordStrength/PasswordStrength';

dist/mantine-hooks/src/index.d.ts

 export { useClickOutside } from './use-click-outside/use-click-outside';
 export { useClipboard } from './use-clipboard/use-clipboard';
 export { useColorScheme } from './use-color-scheme/use-color-scheme';
+export { useDebouncedValue } from './use-debounced-value/use-debounced-value';
 export { useDocumentTitle } from './use-document-title/use-document-title';
 export { useFocusTrap } from './use-focus-trap/use-focus-trap';
 export { useForm } from './use-form/use-form';
-export { useId, randomId } from './use-id/use-id';
+export { useId } from './use-id/use-id';
+export { useIsomorphicEffect } from './use-isomorphic-effect/use-isomorphic-effect';
 export { useListState } from './use-list-state/use-list-state';
@@ -9,0 +11,0 @@ export { useLocalStorageValue } from './use-local-storage-value/use-local-storage-value';

dist/mantine-hooks/src/use-id/use-id.d.ts

@@ -1,3 +0,2 @@
-export declare function randomId(): string;
 export declare function useId(id?: string, generateId?: () => string): string;
 //# sourceMappingURL=use-id.d.ts.map

dist/mantine-hooks/src/use-scroll-lock/use-scroll-lock.d.ts

@@ -1,2 +0,4 @@
-export declare function useScrollLock(lock: boolean): void;
+export declare function useScrollLock(lock: boolean, options?: {
+    disableTouchEvents: boolean;
+}): void;
 //# sourceMappingURL=use-scroll-lock.d.ts.map

dist/mantine-tag-picker/src/index.d.ts

 export type { TagPickerColor, TagPickerTag } from './types';
+export type { TagPickerProps } from './TagPickerContainer';
 export { TagPickerContainer as TagPicker } from './TagPickerContainer';
 //# sourceMappingURL=index.d.ts.map

dist/mantine-tag-picker/src/TagEdit/TagEdit.styles.d.ts

@@ -1,8 +0,3 @@
-import { MantineTheme } from "../../../mantine-core/src";
-declare const _default: (data?: {
-    theme: MantineTheme;
-} & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"header" | "input" | "tagEdit" | "deleteControl" | "deleteIcon" | "colorsList" | "colorControl" | "colorLabel" | "colorControlBody">;
+declare const _default: (args?: unknown) => import("jss").Classes<"header" | "input" | "tagEdit" | "deleteControl" | "deleteIcon" | "colorsList" | "colorControl" | "colorLabel" | "colorControlBody">;
 export default _default;
 //# sourceMappingURL=TagEdit.styles.d.ts.map

dist/mantine-tag-picker/src/TagItem/TagItem.d.ts

 import { MantineThemeOverride, MantineTransition } from "../../../mantine-core/src";
 import { TagPickerColor, TagPickerTag } from '../types';
-interface TagItemProps {
+export interface TagItemProps {
     index: number;
@@ -30,3 +30,2 @@ hovered: number;
 }
-export {};
 //# sourceMappingURL=TagItem.d.ts.map

dist/mantine-tag-picker/src/TagItem/TagItem.styles.d.ts

@@ -1,8 +0,3 @@
-import { MantineTheme } from "../../../mantine-core/src";
-declare const _default: (data?: {
-    theme: MantineTheme;
-} & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"body" | "hovered" | "item" | "badge" | "control" | "controlInner">;
+declare const _default: (args?: unknown) => import("jss").Classes<"body" | "hovered" | "control" | "item" | "badge" | "controlInner">;
 export default _default;
 //# sourceMappingURL=TagItem.styles.d.ts.map

dist/mantine-tag-picker/src/TagPicker/TagPicker.d.ts

 import React from 'react';
 import { TagsListProps } from '../TagsList/TagsList';
-interface TagPickerProps extends TagsListProps {
+export interface TagPickerProps extends TagsListProps {
     dropdownOpened: boolean;
@@ -14,3 +14,2 @@ controlRef: React.RefCallback<HTMLButtonElement>;
 export declare function TagPicker({ dropdownOpened, openDropdown, closeDropdown, controlRef, value, noValueLabel, themeOverride, transitionDuration, controlId, labelledBy, transition, transitionTimingFunction, ...others }: TagPickerProps): JSX.Element;
-export {};
 //# sourceMappingURL=TagPicker.d.ts.map

dist/mantine-tag-picker/src/TagPicker/TagPicker.styles.d.ts

@@ -1,8 +0,3 @@
-import { MantineTheme } from "../../../mantine-core/src";
-declare const _default: (data?: {
-    theme: MantineTheme;
-} & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"control" | "tagPicker" | "dropdown">;
+declare const _default: (args?: unknown) => import("jss").Classes<"control" | "tagPicker" | "dropdown">;
 export default _default;
 //# sourceMappingURL=TagPicker.styles.d.ts.map

dist/mantine-tag-picker/src/TagPickerContainer.d.ts

 import React from 'react';
 import { DefaultProps, MantineTransition } from "../../mantine-core/src";
 import { TagPickerTag, TagPickerColor } from './types';
-interface TagPickerProps extends DefaultProps {
+export interface TagPickerProps extends DefaultProps {
     /** Options which should be rendered in the dropdown list */
@@ -63,3 +63,2 @@ data: TagPickerTag[];
 export declare function TagPickerContainer({ transitionDuration, ...props }: TagPickerProps): JSX.Element;
-export {};
 //# sourceMappingURL=TagPickerContainer.d.ts.map

dist/mantine-tag-picker/src/TagsList/TagsList.styles.d.ts

@@ -1,9 +0,3 @@
-import { MantineTheme } from "../../../mantine-core/src";
-interface TagPickerStyles {
-    theme: MantineTheme;
-}
-declare const _default: (data?: TagPickerStyles & {
-    theme?: MantineTheme;
-}) => import("jss").Classes<"description" | "tagsList" | "searchInput" | "createControl" | "createControlBadge" | "createControlLabel" | "createControlHovered">;
+declare const _default: (args?: unknown) => import("jss").Classes<"description" | "tagsList" | "searchInput" | "createControl" | "createControlBadge" | "createControlLabel" | "createControlHovered">;
 export default _default;
 //# sourceMappingURL=TagsList.styles.d.ts.map

dist/mantine-tests/src/index.d.ts

 export { checkAccessibility } from './check-accessibility';
-export { isHasComposableAttribute } from './it-has-composable-attribute';
 export { itRendersChildren } from './it-renders-children';
@@ -8,2 +7,3 @@ export { itSupportsClassName } from './it-supports-classname';
 export { itSupportsStyle } from './it-supports-style';
+export { mockResizeObserver } from './mock-resize-observer';
 //# sourceMappingURL=index.d.ts.map

dist/mantine-theme/src/index.d.ts

 export type { MantineTheme, MantineThemeOverride, MantineSize, MantineNumberSize, DefaultProps, MantineSizes, } from './types';
+export { createMemoStyles } from './create-memo-styles';
 export { getThemeColor } from './utils/get-theme-color/get-theme-color';
@@ -6,2 +7,3 @@ export { getFocusStyles } from './utils/get-focus-styles/get-focus-styles';
 export { getSizeValue } from './utils/get-size-value/get-size-value';
+export { hexToRgba } from './utils/hex-to-rgba/hex-to-rgba';
 export { MantineProvider } from './MantineProvider/MantineProvider';
@@ -8,0 +10,0 @@ export { useMantineTheme } from './use-mantine-theme/use-mantine-theme';

dist/mantine-theme/src/MantineProvider/MantineProvider.d.ts

 import React from 'react';
 import { MantineThemeOverride } from '../types';
-interface MantineProviderProps {
+export interface MantineProviderProps {
     children: React.ReactNode;
@@ -11,3 +11,2 @@ theme?: MantineThemeOverride;
 }
-export {};
 //# sourceMappingURL=MantineProvider.d.ts.map

package.json

 {
   "name": "@mantine/core",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": "dist/lib.js",
@@ -10,3 +10,3 @@ "license": "MIT",
   "peerDependencies": {
-    "@mantine/hooks": "1.0.6",
+    "@mantine/hooks": "1.1.0",
     "react": ">=16.8.0",
@@ -13,0 +13,0 @@ "react-dom": ">=16.8.0",

src/ActionIcon/ActionIcon.styles.ts

@@ -1,2 +0,1 @@
-import { createUseStyles } from 'react-jss';
 import {
@@ -9,2 +8,4 @@ MantineTheme,
   getThemeColor,
+  createMemoStyles,
+  hexToRgba,
 } from '@mantine/theme';
@@ -27,115 +28,116 @@
 
-export default createUseStyles(
-  {
-    filled: ({ theme, color }: ActionIconStylesProps) => ({
-      backgroundColor: getThemeColor({ theme, color, shade: 6 }),
-      color: theme.white,
+export default createMemoStyles({
+  filled: ({ theme, color }: ActionIconStylesProps) => ({
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 7 }),
+      theme.colorScheme === 'dark' ? 0.65 : 1
+    ),
+    color: theme.white,
 
-      '&:not(:disabled):hover': {
-        backgroundColor: getThemeColor({ theme, color, shade: 7 }),
-      },
+    '&:not(:disabled):hover': {
+      backgroundColor: hexToRgba(
+        getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 7 }),
+        theme.colorScheme === 'dark' ? 0.95 : 1
+      ),
+    },
 
-      '&:disabled': {
-        backgroundColor: getThemeColor({
-          theme,
-          color: 'gray',
-          shade: theme.colorScheme === 'dark' ? 8 : 1,
-        }),
-      },
-    }),
+    '&:disabled': {
+      backgroundColor: getThemeColor({
+        theme,
+        color: 'gray',
+        shade: theme.colorScheme === 'dark' ? 8 : 1,
+      }),
+    },
+  }),
 
-    light: ({ theme, color }: ActionIconStylesProps) => ({
-      backgroundColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 0 }),
-      color:
-        theme.colorScheme === 'dark'
-          ? theme.colors.dark[9]
-          : getThemeColor({ theme, color, shade: 9 }),
+  light: ({ theme, color }: ActionIconStylesProps) => ({
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 0 }),
+      theme.colorScheme === 'dark' ? 0.3 : 1
+    ),
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 9 }),
 
-      '&:not(:disabled):hover': {
-        backgroundColor: getThemeColor({
-          theme,
-          color,
-          shade: theme.colorScheme === 'dark' ? 5 : 1,
-        }),
-      },
+    '&:not(:disabled):hover': {
+      backgroundColor: hexToRgba(
+        getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 8 : 1 }),
+        theme.colorScheme === 'dark' ? 0.65 : 1
+      ),
+    },
 
-      '&:disabled': {
-        backgroundColor: getThemeColor({
-          theme,
-          color: 'gray',
-          shade: theme.colorScheme === 'dark' ? 8 : 1,
-        }),
-      },
-    }),
+    '&:disabled': {
+      backgroundColor: getThemeColor({
+        theme,
+        color: 'gray',
+        shade: theme.colorScheme === 'dark' ? 8 : 1,
+      }),
+    },
+  }),
 
-    hover: ({ theme, color }: ActionIconStylesProps) => ({
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-      backgroundColor: 'transparent',
+  hover: ({ theme, color }: ActionIconStylesProps) => ({
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 5 : 7 }),
+    backgroundColor: 'transparent',
 
-      '&:not(:disabled):hover': {
-        backgroundColor:
-          theme.colorScheme === 'dark'
-            ? theme.colors.dark[8]
-            : getThemeColor({ theme, color, shade: 0 }),
-      },
-    }),
+    '&:not(:disabled):hover': {
+      backgroundColor:
+        theme.colorScheme === 'dark'
+          ? theme.colors.dark[8]
+          : getThemeColor({ theme, color, shade: 0 }),
+    },
+  }),
 
-    transparent: ({ theme, color }: ActionIconStylesProps) => ({
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-      backgroundColor: 'transparent',
-    }),
+  transparent: ({ theme, color }: ActionIconStylesProps) => ({
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 5 : 7 }),
+    backgroundColor: 'transparent',
+  }),
 
-    actionIcon: ({ radius, theme, size }: ActionIconStylesProps) => ({
-      ...getFocusStyles(theme),
-      ...getFontStyles(theme),
-      appearance: 'none',
-      WebkitAppearance: 'none',
-      WebkitTapHighlightColor: 'transparent',
-      border: '1px solid transparent',
-      boxSizing: 'border-box',
-      height: getSizeValue({ size, sizes }),
-      minHeight: getSizeValue({ size, sizes }),
-      width: getSizeValue({ size, sizes }),
-      minWidth: getSizeValue({ size, sizes }),
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      padding: 0,
-      lineHeight: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      cursor: 'pointer',
-      transition: 'color 100ms ease, background-color 100ms ease',
+  actionIcon: ({ radius, theme, size }: ActionIconStylesProps) => ({
+    ...getFocusStyles(theme),
+    ...getFontStyles(theme),
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    WebkitTapHighlightColor: 'transparent',
+    border: '1px solid transparent',
+    boxSizing: 'border-box',
+    height: getSizeValue({ size, sizes }),
+    minHeight: getSizeValue({ size, sizes }),
+    width: getSizeValue({ size, sizes }),
+    minWidth: getSizeValue({ size, sizes }),
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    padding: 0,
+    lineHeight: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    transition: 'color 100ms ease, background-color 100ms ease',
 
-      '&:not(:disabled):active': {
-        transform: 'translateY(1px)',
-      },
+    '&:not(:disabled):active': {
+      transform: 'translateY(1px)',
+    },
 
-      '&:disabled': {
-        color: theme.colors.gray[theme.colorScheme === 'dark' ? 6 : 4],
-        cursor: 'not-allowed',
-      },
-    }),
+    '&:disabled': {
+      color: theme.colors.gray[theme.colorScheme === 'dark' ? 6 : 4],
+      cursor: 'not-allowed',
+    },
+  }),
 
-    outline: ({ theme, color }: ActionIconStylesProps) => ({
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-      backgroundColor: 'transparent',
-      borderColor: getThemeColor({
-        theme,
-        color,
-        shade: theme.colorScheme === 'dark' ? 4 : 6,
-      }),
+  outline: ({ theme, color }: ActionIconStylesProps) => ({
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 8 }),
+    backgroundColor: 'transparent',
+    border: `1px solid ${hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 4 }),
+      theme.colorScheme === 'dark' ? 0.45 : 1
+    )}`,
 
-      '&:not(:disabled):hover': {
-        backgroundColor:
-          theme.colorScheme === 'dark'
-            ? theme.colors.dark[8]
-            : getThemeColor({ theme, color, shade: 0 }),
-      },
+    '&:not(:disabled):hover': {
+      backgroundColor:
+        theme.colorScheme === 'dark'
+          ? theme.colors.dark[8]
+          : getThemeColor({ theme, color, shade: 0 }),
+    },
 
-      '&:disabled': {
-        borderColor: theme.colors.gray[theme.colorScheme === 'dark' ? 7 : 3],
-      },
-    }),
-  },
-  { link: true }
-);
+    '&:disabled': {
+      borderColor: theme.colors.gray[theme.colorScheme === 'dark' ? 7 : 3],
+    },
+  }),
+});

src/Alert/Alert.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getThemeColor, getFontStyles } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, getThemeColor, getFontStyles } from '@mantine/theme';
 
@@ -11,52 +10,53 @@ interface AlertStylesProps {
 
-export default createUseStyles(
-  {
-    alert: ({ color, theme }: AlertStylesProps) => ({
-      position: 'relative',
-      padding: [theme.spacing.xs, theme.spacing.md],
-      paddingLeft: theme.spacing.md + theme.spacing.xs / 2 + LINE_WIDTH,
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white,
-      border: `1px solid ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[2]
-      }`,
+export default createMemoStyles({
+  alert: ({ color, theme }: AlertStylesProps) => ({
+    position: 'relative',
+    padding: [theme.spacing.xs, theme.spacing.md],
+    paddingLeft: theme.spacing.md + theme.spacing.xs / 2 + LINE_WIDTH,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2]
+    }`,
 
-      '&::before': {
-        content: '""',
-        display: 'block',
-        position: 'absolute',
-        top: theme.spacing.xs,
-        bottom: theme.spacing.xs,
-        left: theme.spacing.xs,
-        width: LINE_WIDTH,
-        borderRadius: LINE_WIDTH,
-        backgroundColor: getThemeColor({ theme, color, shade: 6 }),
-      },
-    }),
+    '&::before': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      top: theme.spacing.xs,
+      bottom: theme.spacing.xs,
+      left: theme.spacing.xs,
+      width: LINE_WIDTH,
+      borderRadius: LINE_WIDTH,
+      backgroundColor: getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 4 : 6,
+      }),
+    },
+  }),
 
-    title: ({ color, theme }: AlertStylesProps) => ({
-      boxSizing: 'border-box',
-      color: getThemeColor({ theme, color, shade: 6 }),
-      margin: 0,
-      marginBottom: theme.spacing.xs / 2,
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-    }),
+  title: ({ color, theme }: AlertStylesProps) => ({
+    boxSizing: 'border-box',
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
+    margin: 0,
+    marginBottom: theme.spacing.xs / 2,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  }),
 
-    body: ({ theme }: AlertStylesProps) => ({
-      ...getFontStyles(theme),
-      lineHeight: theme.lineHeight,
-      borderBottomLeftRadius: theme.radius.sm,
-      borderBottomRightRadius: theme.radius.sm,
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      fontSize: theme.fontSizes.sm,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+  body: ({ theme }: AlertStylesProps) => ({
+    ...getFontStyles(theme),
+    lineHeight: theme.lineHeight,
+    borderBottomLeftRadius: theme.radius.sm,
+    borderBottomRightRadius: theme.radius.sm,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    fontSize: theme.fontSizes.sm,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
 
-      '&:only-child': {
-        borderTopRightRadius: theme.radius.sm,
-        borderTopLeftRadius: theme.radius.sm,
-      },
-    }),
-  },
-  { link: true }
-);
+    '&:only-child': {
+      borderTopRightRadius: theme.radius.sm,
+      borderTopLeftRadius: theme.radius.sm,
+    },
+  }),
+});

src/Avatar/Avatar.styles.ts

@@ -1,3 +0,3 @@
-import { createUseStyles } from 'react-jss';
 import {
+  createMemoStyles,
   MantineTheme,
@@ -8,2 +8,3 @@ getSizeValue,
   getThemeColor,
+  hexToRgba,
 } from '@mantine/theme';
@@ -26,41 +27,41 @@
 
-export default createUseStyles(
-  {
-    avatar: ({ size, radius, theme }: AvatarStylesProps) => ({
-      boxSizing: 'border-box',
-      position: 'relative',
-      userSelect: 'none',
-      overflow: 'hidden',
-      width: getSizeValue({ size, sizes }),
-      height: getSizeValue({ size, sizes }),
-      borderRadius: radius ? getSizeValue({ size: radius, sizes: theme.radius }) : size,
-    }),
+export default createMemoStyles({
+  avatar: ({ size, radius, theme }: AvatarStylesProps) => ({
+    boxSizing: 'border-box',
+    position: 'relative',
+    userSelect: 'none',
+    overflow: 'hidden',
+    width: getSizeValue({ size, sizes }),
+    height: getSizeValue({ size, sizes }),
+    borderRadius: radius ? getSizeValue({ size: radius, sizes: theme.radius }) : size,
+  }),
 
-    image: {
-      objectFit: 'cover',
-      width: '100%',
-      height: '100%',
-    },
+  image: {
+    objectFit: 'cover',
+    width: '100%',
+    height: '100%',
+  },
 
-    placeholder: ({ theme, size, color }: AvatarStylesProps) => ({
-      ...getFontStyles(theme),
-      fontSize: getSizeValue({ size, sizes }) / 2.5,
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 0 : 6 }),
-      fontWeight: 700,
-      backgroundColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 1 }),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: '100%',
-      height: '100%',
-      userSelect: 'none',
-    }),
+  placeholder: ({ theme, size, color }: AvatarStylesProps) => ({
+    ...getFontStyles(theme),
+    fontSize: getSizeValue({ size, sizes }) / 2.5,
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 0 : 6 }),
+    fontWeight: 700,
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 8 : 1 }),
+      theme.colorScheme === 'dark' ? 0.5 : 1
+    ),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    userSelect: 'none',
+  }),
 
-    placeholderIcon: ({ theme, color }: AvatarStylesProps) => ({
-      width: '70%',
-      height: '70%',
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 0 : 6 }),
-    }),
-  },
-  { link: true }
-);
+  placeholderIcon: ({ theme, color }: AvatarStylesProps) => ({
+    width: '70%',
+    height: '70%',
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 0 : 6 }),
+  }),
+});

src/Badge/Badge.styles.ts

@@ -1,3 +0,3 @@
-import { createUseStyles } from 'react-jss';
 import {
+  createMemoStyles,
   MantineTheme,
@@ -10,2 +10,3 @@ MantineSize,
   getSizeValue,
+  hexToRgba,
 } from '@mantine/theme';
@@ -49,66 +50,72 @@
 
-export default createUseStyles(
-  {
-    leftSection: ({ theme }: BadgeStylesProps) => ({
-      marginRight: theme.spacing.xs / 2,
-    }),
+export default createMemoStyles({
+  leftSection: ({ theme }: BadgeStylesProps) => ({
+    marginRight: theme.spacing.xs / 2,
+  }),
 
-    rightSection: ({ theme }: BadgeStylesProps) => ({
-      marginLeft: theme.spacing.xs / 2,
-    }),
+  rightSection: ({ theme }: BadgeStylesProps) => ({
+    marginLeft: theme.spacing.xs / 2,
+  }),
 
-    inner: {
-      whiteSpace: 'nowrap',
+  inner: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+
+  badge: ({ theme, size, fullWidth, radius }: BadgeStylesProps) => {
+    const { fontSize, height } = size in sizes ? sizes[size] : sizes.md;
+    return {
+      ...getFocusStyles(theme),
+      ...getFontStyles(theme),
+      fontSize,
+      height,
+      WebkitTapHighlightColor: 'transparent',
+      lineHeight: `${height - 2}px`,
+      border: '1px solid transparent',
+      textDecoration: 'none',
+      padding: [0, getSizeValue({ size, sizes: theme.spacing }) / 1.5],
+      boxSizing: 'border-box',
+      display: fullWidth ? 'flex' : 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: fullWidth ? '100%' : 'auto',
+      textTransform: 'uppercase',
+      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+      fontWeight: 700,
+      letterSpacing: 0.25,
+      cursor: 'default',
+      textOverflow: 'ellipsis',
       overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
+    };
+  },
 
-    badge: ({ theme, size, fullWidth, radius }: BadgeStylesProps) => {
-      const { fontSize, height } = size in sizes ? sizes[size] : sizes.md;
-      return {
-        ...getFocusStyles(theme),
-        ...getFontStyles(theme),
-        fontSize,
-        height,
-        WebkitTapHighlightColor: 'transparent',
-        lineHeight: `${height - 2}px`,
-        border: '1px solid transparent',
-        textDecoration: 'none',
-        padding: [0, getSizeValue({ size, sizes: theme.spacing }) / 1.5],
-        boxSizing: 'border-box',
-        display: fullWidth ? 'flex' : 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: fullWidth ? '100%' : 'auto',
-        textTransform: 'uppercase',
-        borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-        fontWeight: 700,
-        letterSpacing: 0.25,
-        cursor: 'default',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-      };
-    },
+  light: ({ theme, color }: BadgeStylesProps) => ({
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 0 }),
+      theme.colorScheme === 'dark' ? 0.3 : 1
+    ),
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 9 }),
+  }),
 
-    light: ({ theme, color }: BadgeStylesProps) => ({
-      backgroundColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 0 }),
-      color:
-        theme.colorScheme === 'dark'
-          ? theme.colors.dark[9]
-          : getThemeColor({ theme, color, shade: 9 }),
-    }),
+  filled: ({ theme, color }: BadgeStylesProps) => ({
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 7 }),
+      theme.colorScheme === 'dark' ? 0.65 : 1
+    ),
+    color: theme.white,
+    textShadow:
+      theme.colorScheme === 'dark'
+        ? 'none'
+        : `1px 1px 0 ${getThemeColor({ theme, color, shade: 9 })}`,
+  }),
 
-    filled: ({ theme, color }: BadgeStylesProps) => ({
-      backgroundColor: getThemeColor({ theme, color, shade: 7 }),
-      color: theme.white,
-      textShadow: `1px 1px 0 ${getThemeColor({ theme, color, shade: 9 })}`,
-    }),
-
-    outline: ({ theme, color }: BadgeStylesProps) => ({
-      backgroundColor: 'transparent',
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-      borderColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-    }),
-  },
-  { link: true }
-);
+  outline: ({ theme, color }: BadgeStylesProps) => ({
+    backgroundColor: 'transparent',
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 8 }),
+    borderColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 8 }),
+      0.55
+    ),
+  }),
+});

src/Blockquote/Blockquote.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getFontStyles, getThemeColor } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, getFontStyles, getThemeColor } from '@mantine/theme';
 
@@ -9,48 +8,45 @@ interface BlockquoteStylesProps {
 
-export default createUseStyles(
-  {
-    blockquote: ({ theme, color }: BlockquoteStylesProps) => ({
-      ...getFontStyles(theme),
-      fontSize: theme.fontSizes.lg,
-      lineHeight: theme.lineHeight,
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[0],
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-      margin: 0,
-      borderTopRightRadius: theme.radius.sm,
-      borderBottomRightRadius: theme.radius.sm,
-      borderLeft: `3px solid ${getThemeColor({
-        theme,
-        color,
-        shade: theme.colorScheme === 'dark' ? 4 : 6,
-      })}`,
-      padding: [theme.spacing.md, theme.spacing.lg],
-    }),
+export default createMemoStyles({
+  blockquote: ({ theme, color }: BlockquoteStylesProps) => ({
+    ...getFontStyles(theme),
+    fontSize: theme.fontSizes.lg,
+    lineHeight: theme.lineHeight,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+    margin: 0,
+    borderTopRightRadius: theme.radius.sm,
+    borderBottomRightRadius: theme.radius.sm,
+    borderLeft: `3px solid ${getThemeColor({
+      theme,
+      color,
+      shade: theme.colorScheme === 'dark' ? 4 : 6,
+    })}`,
+    padding: [theme.spacing.md, theme.spacing.lg],
+  }),
 
-    inner: {
-      display: 'flex',
-    },
+  inner: {
+    display: 'flex',
+  },
 
-    body: {
-      flex: 1,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
+  body: {
+    flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
 
-    icon: ({ theme, color }: BlockquoteStylesProps) => ({
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-      marginRight: theme.spacing.md,
-      marginTop: 2,
-      width: 22,
-    }),
+  icon: ({ theme, color }: BlockquoteStylesProps) => ({
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
+    marginRight: theme.spacing.md,
+    marginTop: 2,
+    width: 22,
+  }),
 
-    cite: ({ theme }: BlockquoteStylesProps) => ({
-      display: 'block',
-      fontSize: theme.fontSizes.sm,
-      marginTop: theme.spacing.xs,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    }),
-  },
-  { link: true }
-);
+  cite: ({ theme }: BlockquoteStylesProps) => ({
+    display: 'block',
+    fontSize: theme.fontSizes.sm,
+    marginTop: theme.spacing.xs,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }),
+});

src/Breadcrumbs/Breadcrumbs.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme } from '@mantine/theme';
+import { createMemoStyles, MantineTheme } from '@mantine/theme';
 
@@ -8,25 +7,22 @@ interface BreadcrumbsStylesProps {
 
-export default createUseStyles(
-  {
-    breadcrumbs: {
-      display: 'flex',
-    },
+export default createMemoStyles({
+  breadcrumbs: {
+    display: 'flex',
+  },
 
-    breadcrumb: {
-      lineHeight: 1,
-      whiteSpace: 'nowrap',
-      WebkitTapHighlightColor: 'transparent',
-    },
+  breadcrumb: {
+    lineHeight: 1,
+    whiteSpace: 'nowrap',
+    WebkitTapHighlightColor: 'transparent',
+  },
 
-    separator: ({ theme }: BreadcrumbsStylesProps) => ({
-      marginLeft: theme.spacing.xs,
-      marginRight: theme.spacing.xs,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[7],
-      lineHeight: 1,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }),
-  },
-  { link: true }
-);
+  separator: ({ theme }: BreadcrumbsStylesProps) => ({
+    marginLeft: theme.spacing.xs,
+    marginRight: theme.spacing.xs,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[7],
+    lineHeight: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }),
+});

src/Burger/Burger.styles.ts

@@ -1,3 +0,3 @@
-import { createUseStyles } from 'react-jss';
 import {
+  createMemoStyles,
   MantineTheme,
@@ -25,68 +25,65 @@ MantineNumberSize,
 
-export default createUseStyles(
-  {
-    opened: {},
+export default createMemoStyles({
+  opened: {},
 
-    wrapper: ({ size, theme }: BurgerStylesProps) => ({
-      ...getFocusStyles(theme),
-      WebkitTapHighlightColor: 'transparent',
-      borderRadius: theme.radius.sm,
-      width: getSizeValue({ size, sizes }) + theme.spacing.xs,
-      height: getSizeValue({ size, sizes }) + theme.spacing.xs,
-      padding: theme.spacing.xs / 2,
-      backgroundColor: 'transparent',
-      border: 0,
-      cursor: 'pointer',
-    }),
+  wrapper: ({ size, theme }: BurgerStylesProps) => ({
+    ...getFocusStyles(theme),
+    WebkitTapHighlightColor: 'transparent',
+    borderRadius: theme.radius.sm,
+    width: getSizeValue({ size, sizes }) + theme.spacing.xs,
+    height: getSizeValue({ size, sizes }) + theme.spacing.xs,
+    padding: theme.spacing.xs / 2,
+    backgroundColor: 'transparent',
+    border: 0,
+    cursor: 'pointer',
+  }),
 
-    burger: ({ size, theme, color, reduceMotion }: BurgerStylesProps) => {
-      const sizeValue = getSizeValue({ size, sizes });
+  burger: ({ size, theme, color, reduceMotion }: BurgerStylesProps) => {
+    const sizeValue = getSizeValue({ size, sizes });
 
-      return {
-        position: 'relative',
-        userSelect: 'none',
-        boxSizing: 'border-box',
+    return {
+      position: 'relative',
+      userSelect: 'none',
+      boxSizing: 'border-box',
 
-        '&, &:before, &:after': {
-          display: 'block',
-          width: sizeValue,
-          height: Math.ceil(sizeValue / 12),
-          backgroundColor: getThemeColor({
-            theme,
-            color,
-            shade: theme.colorScheme === 'dark' ? 4 : 7,
-          }),
-          outline: '1px solid transparent',
-          transitionProperty: 'background-color, transform',
-          transitionDuration: reduceMotion ? '0ms' : '300ms',
-        },
+      '&, &:before, &:after': {
+        display: 'block',
+        width: sizeValue,
+        height: Math.ceil(sizeValue / 12),
+        backgroundColor: getThemeColor({
+          theme,
+          color,
+          shade: theme.colorScheme === 'dark' ? 4 : 7,
+        }),
+        outline: '1px solid transparent',
+        transitionProperty: 'background-color, transform',
+        transitionDuration: reduceMotion ? '0ms' : '300ms',
+      },
 
-        '&:before, &:after': {
-          position: 'absolute',
-          content: '""',
-          left: 0,
-        },
+      '&:before, &:after': {
+        position: 'absolute',
+        content: '""',
+        left: 0,
+      },
 
+      '&:before': {
+        top: (sizeValue / 3) * -1,
+      },
+
+      '&:after': {
+        top: sizeValue / 3,
+      },
+
+      '&$opened': {
+        backgroundColor: 'transparent !important',
         '&:before': {
-          top: (sizeValue / 3) * -1,
+          transform: `translateY(${sizeValue / 3}px) rotate(45deg)`,
         },
 
         '&:after': {
-          top: sizeValue / 3,
+          transform: `translateY(-${sizeValue / 3}px) rotate(-45deg)`,
         },
-
-        '&$opened': {
-          backgroundColor: 'transparent !important',
-          '&:before': {
-            transform: `translateY(${sizeValue / 3}px) rotate(45deg)`,
-          },
-
-          '&:after': {
-            transform: `translateY(-${sizeValue / 3}px) rotate(-45deg)`,
-          },
-        },
-      };
-    },
+      },
+    };
   },
-  { link: true }
-);
+});

src/Button/Button.styles.ts

@@ -1,3 +0,3 @@
-import { createUseStyles } from 'react-jss';
 import {
+  createMemoStyles,
   MantineTheme,
@@ -11,2 +11,3 @@ MantineSize,
   MantineSizes,
+  hexToRgba,
 } from '@mantine/theme';
@@ -64,159 +65,164 @@
 
-export default createUseStyles(
-  {
-    icon: {
-      display: 'flex',
-      alignItems: 'center',
-    },
+export default createMemoStyles({
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+  },
 
-    leftIcon: {
-      marginRight: 10,
-    },
+  leftIcon: {
+    marginRight: 10,
+  },
 
-    rightIcon: {
-      marginLeft: 10,
-    },
+  rightIcon: {
+    marginLeft: 10,
+  },
 
-    inner: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '100%',
-    },
+  inner: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+  },
 
-    label: {
-      display: 'block',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
+  label: {
+    display: 'block',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
 
-    shared: (props: ButtonStylesProps) => ({
-      ...sizes[props.size],
-      ...getFontStyles(props.theme),
-      ...getFocusStyles(props.theme),
-      ...getWidthStyles(props.fullWidth),
-      WebkitTapHighlightColor: 'transparent',
-      userSelect: 'none',
-      boxSizing: 'border-box',
-      textDecoration: 'none',
-      cursor: 'pointer',
-      appearance: 'none',
-      WebkitAppearance: 'none',
-    }),
+  shared: (props: ButtonStylesProps) => ({
+    ...sizes[props.size],
+    ...getFontStyles(props.theme),
+    ...getFocusStyles(props.theme),
+    ...getWidthStyles(props.fullWidth),
+    WebkitTapHighlightColor: 'transparent',
+    userSelect: 'none',
+    boxSizing: 'border-box',
+    textDecoration: 'none',
+    cursor: 'pointer',
+    appearance: 'none',
+    WebkitAppearance: 'none',
+  }),
 
-    outline: ({ color, radius, theme }: ButtonStylesProps) => ({
-      backgroundColor: 'transparent',
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      textTransform: 'uppercase',
-      fontWeight: 'bold',
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 8 }),
-      border: `1px solid ${getThemeColor({
-        theme,
-        color,
-        shade: theme.colorScheme === 'dark' ? 4 : 8,
-      })}`,
+  outline: ({ color, radius, theme }: ButtonStylesProps) => ({
+    backgroundColor: 'transparent',
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 8 }),
+    border: `1px solid ${hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 4 }),
+      theme.colorScheme === 'dark' ? 0.45 : 1
+    )}`,
 
-      '&:not(:disabled):active': {
-        transform: 'translateY(1px)',
-      },
+    '&:not(:disabled):active': {
+      transform: 'translateY(1px)',
+    },
 
-      '&:disabled': {
-        borderColor: 'transparent',
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
-        cursor: 'not-allowed',
-      },
-    }),
+    '&:disabled': {
+      borderColor: 'transparent',
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
+      cursor: 'not-allowed',
+    },
+  }),
 
-    light: ({ color, size, radius, theme }: ButtonStylesProps) => ({
-      border: '1px solid transparent',
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      textTransform: 'uppercase',
-      fontWeight: 'bold',
-      backgroundColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 0 }),
-      color:
-        theme.colorScheme === 'dark'
-          ? theme.colors.dark[9]
-          : getThemeColor({ theme, color, shade: 9 }),
+  light: ({ color, size, radius, theme }: ButtonStylesProps) => ({
+    border: '1px solid transparent',
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 0 }),
+      theme.colorScheme === 'dark' ? 0.3 : 1
+    ),
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 9 }),
 
-      '& $inner': {
-        height: sizes[size].height - 2,
-      },
+    '& $inner': {
+      height: sizes[size].height - 2,
+    },
 
-      '&:hover': {
-        backgroundColor: getThemeColor({
-          theme,
-          color,
-          shade: theme.colorScheme === 'dark' ? 5 : 1,
-        }),
-      },
+    '&:hover': {
+      backgroundColor: hexToRgba(
+        getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 8 : 1 }),
+        theme.colorScheme === 'dark' ? 0.65 : 1
+      ),
+    },
 
-      '&:not(:disabled):active': {
-        transform: 'translateY(1px)',
-      },
+    '&:not(:disabled):active': {
+      transform: 'translateY(1px)',
+    },
 
-      '&:disabled': {
-        borderColor: 'transparent',
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
-        textShadow: 'none',
-        cursor: 'not-allowed',
-      },
-    }),
+    '&:disabled': {
+      borderColor: 'transparent',
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
+      textShadow: 'none',
+      cursor: 'not-allowed',
+    },
+  }),
 
-    filled: ({ color, size, radius, theme }: ButtonStylesProps) => ({
-      border: '1px solid transparent',
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      textTransform: 'uppercase',
-      fontWeight: 'bold',
-      backgroundColor: getThemeColor({ theme, color, shade: 6 }),
-      textShadow: `1px 1px 0 ${getThemeColor({ theme, color, shade: 8 })}`,
-      color: theme.white,
+  filled: ({ color, size, radius, theme }: ButtonStylesProps) => ({
+    border: '1px solid transparent',
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 7 }),
+      theme.colorScheme === 'dark' ? 0.65 : 1
+    ),
+    textShadow:
+      theme.colorScheme === 'dark'
+        ? 'none'
+        : `1px 1px 0 ${getThemeColor({ theme, color, shade: 8 })}`,
+    color: theme.white,
 
-      '& $inner': {
-        height: sizes[size].height - 2,
-      },
+    '& $inner': {
+      height: sizes[size].height - 2,
+    },
 
-      '&:hover': {
-        backgroundColor: getThemeColor({ theme, color, shade: 7 }),
-      },
+    '&:hover': {
+      backgroundColor: hexToRgba(
+        getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 7 }),
+        theme.colorScheme === 'dark' ? 0.95 : 1
+      ),
+    },
 
-      '&:not(:disabled):active': {
-        transform: 'translateY(1px)',
-      },
+    '&:not(:disabled):active': {
+      transform: 'translateY(1px)',
+    },
 
-      '&:disabled': {
-        borderColor: 'transparent',
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
-        textShadow: 'none',
-        cursor: 'not-allowed',
-      },
-    }),
+    '&:disabled': {
+      borderColor: 'transparent',
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
+      textShadow: 'none',
+      cursor: 'not-allowed',
+    },
+  }),
 
-    link: ({ color, radius, theme }: ButtonStylesProps) => ({
-      padding: 0,
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      backgroundColor: 'transparent',
-      border: 0,
-      display: 'inline-block',
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-      cursor: 'pointer',
+  link: ({ color, radius, theme }: ButtonStylesProps) => ({
+    padding: 0,
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    backgroundColor: 'transparent',
+    border: 0,
+    display: 'inline-block',
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
+    cursor: 'pointer',
+    lineHeight: theme.lineHeight,
 
-      '&:hover': {
-        textDecoration: 'underline',
-      },
+    '&:hover': {
+      textDecoration: 'underline',
+    },
 
-      '&:disabled': {
-        color: theme.colors.gray[5],
-        cursor: 'not-allowed',
+    '&:disabled': {
+      color: theme.colors.gray[5],
+      cursor: 'not-allowed',
 
-        '&:hover': {
-          textDecoration: 'none',
-        },
+      '&:hover': {
+        textDecoration: 'none',
       },
-    }),
-  },
-  { link: true }
-);
+    },
+  }),
+});

src/Card/Card.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
 
@@ -10,48 +9,45 @@ interface CardStylesProps {
 
-export default createUseStyles(
-  {
-    card: ({ theme, radius, padding }: CardStylesProps) => {
-      const spacing = getSizeValue({ size: padding, sizes: theme.spacing });
-      const borderRadius = getSizeValue({ size: radius, sizes: theme.radius });
+export default createMemoStyles({
+  card: ({ theme, radius, padding }: CardStylesProps) => {
+    const spacing = getSizeValue({ size: padding, sizes: theme.spacing });
+    const borderRadius = getSizeValue({ size: radius, sizes: theme.radius });
 
-      return {
-        position: 'relative',
+    return {
+      position: 'relative',
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
 
-        '& [data-mantine-image]': {
-          width: `calc(100% + ${spacing * 2}px) !important`,
-          marginLeft: -spacing,
-          marginRight: -spacing,
+      '& [data-mantine-image]': {
+        width: `calc(100% + ${spacing * 2}px) !important`,
+        marginLeft: -spacing,
+        marginRight: -spacing,
 
-          '&:first-child': {
-            borderTopRightRadius: borderRadius,
-            borderTopLeftRadius: borderRadius,
-            marginBottom: spacing,
-            marginTop: -spacing,
-          },
+        '&:first-child': {
+          borderTopRightRadius: borderRadius,
+          borderTopLeftRadius: borderRadius,
+          marginBottom: spacing,
+          marginTop: -spacing,
+        },
 
-          '&:last-child': {
-            borderBottomRightRadius: borderRadius,
-            borderBottomLeftRadius: borderRadius,
-            marginTop: spacing,
-            marginBottom: -spacing,
-          },
+        '&:last-child': {
+          borderBottomRightRadius: borderRadius,
+          borderBottomLeftRadius: borderRadius,
+          marginTop: spacing,
+          marginBottom: -spacing,
+        },
 
-          '&:first-child:last-child': {
-            marginTop: -spacing,
-            marginBottom: -spacing,
-          },
+        '&:first-child:last-child': {
+          marginTop: -spacing,
+          marginBottom: -spacing,
         },
+      },
 
-        '& [data-mantine-hr]': {
-          borderTopColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
-          marginLeft: -spacing,
-          marginRight: -spacing,
-          marginBottom: spacing / 2,
-          marginTop: spacing / 2,
-        },
-      };
-    },
+      '& [data-mantine-hr]': {
+        borderTopColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
+        marginLeft: -spacing,
+        marginRight: -spacing,
+        marginBottom: spacing / 2,
+        marginTop: spacing / 2,
+      },
+    };
   },
-  { link: true }
-);
+});

src/Card/CardsGrid/CardsGrid.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineNumberSize, MantineTheme, getSizeValue } from '@mantine/theme';
+import { createMemoStyles, MantineNumberSize, MantineTheme, getSizeValue } from '@mantine/theme';
 
@@ -11,23 +10,20 @@ interface CardsGridStyles {
 
-export default createUseStyles(
-  {
-    grid: ({ theme, gutter, cardsPerRow, grow }: CardsGridStyles) => {
-      const gutterSize = getSizeValue({ size: gutter, sizes: theme.spacing });
+export default createMemoStyles({
+  grid: ({ theme, gutter, cardsPerRow, grow }: CardsGridStyles) => {
+    const gutterSize = getSizeValue({ size: gutter, sizes: theme.spacing });
 
-      const getCardFlex = (perRow: number) =>
-        `${grow ? 1 : 0} 0 calc(${100 / perRow}% - ${gutterSize}px)`;
+    const getCardFlex = (perRow: number) =>
+      `${grow ? 1 : 0} 0 calc(${100 / perRow}% - ${gutterSize}px)`;
 
-      return {
-        display: 'flex',
-        flexWrap: 'wrap',
-        margin: -gutterSize / 2,
+    return {
+      display: 'flex',
+      flexWrap: 'wrap',
+      margin: -gutterSize / 2,
 
-        '& [data-mantine-card]': {
-          margin: gutterSize / 2,
-          flex: getCardFlex(cardsPerRow),
-        },
-      };
-    },
+      '& [data-mantine-card]': {
+        margin: gutterSize / 2,
+        flex: getCardFlex(cardsPerRow),
+      },
+    };
   },
-  { link: true }
-);
+});

src/Checkbox/Checkbox.styles.ts

@@ -1,3 +0,3 @@
-import { createUseStyles } from 'react-jss';
 import {
+  createMemoStyles,
   MantineTheme,
@@ -25,80 +25,77 @@ MantineSize,
 
-export default createUseStyles(
-  {
-    wrapper: {
-      display: 'flex',
-      alignItems: 'center',
-    },
+export default createMemoStyles({
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+  },
 
-    checkboxWrapper: ({ size }: CheckboxStylesProps) => ({
-      position: 'relative',
-      width: getSizeValue({ size, sizes }),
-      height: getSizeValue({ size, sizes }),
-    }),
+  checkboxWrapper: ({ size }: CheckboxStylesProps) => ({
+    position: 'relative',
+    width: getSizeValue({ size, sizes }),
+    height: getSizeValue({ size, sizes }),
+  }),
 
-    label: ({ theme, size }: CheckboxStylesProps) => ({
-      ...getFontStyles(theme),
-      WebkitTapHighlightColor: 'transparent',
-      paddingLeft: theme.spacing.sm,
-      fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
-      lineHeight: `${getSizeValue({ size, sizes })}px`,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-    }),
+  label: ({ theme, size }: CheckboxStylesProps) => ({
+    ...getFontStyles(theme),
+    WebkitTapHighlightColor: 'transparent',
+    paddingLeft: theme.spacing.sm,
+    fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
+    lineHeight: `${getSizeValue({ size, sizes })}px`,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+  }),
 
-    checkbox: ({ size, theme, color }: CheckboxStylesProps) => ({
-      ...getFocusStyles(theme),
-      appearance: 'none',
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
-      border: `1px solid ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
-      }`,
-      width: getSizeValue({ size, sizes }),
-      height: getSizeValue({ size, sizes }),
-      borderRadius: theme.radius.sm,
-      padding: 0,
-      outline: 0,
-      display: 'block',
-      margin: 0,
+  checkbox: ({ size, theme, color }: CheckboxStylesProps) => ({
+    ...getFocusStyles(theme),
+    appearance: 'none',
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[0],
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
+    }`,
+    width: getSizeValue({ size, sizes }),
+    height: getSizeValue({ size, sizes }),
+    borderRadius: theme.radius.sm,
+    padding: 0,
+    outline: 0,
+    display: 'block',
+    margin: 0,
 
-      '&:checked': {
-        backgroundColor: getThemeColor({
-          theme,
-          color,
-          shade: theme.colorScheme === 'dark' ? 4 : 6,
-        }),
-        borderColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-        color: theme.white,
+    '&:checked': {
+      backgroundColor: getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 4 : 6,
+      }),
+      borderColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
+      color: theme.white,
 
-        '& + $icon': {
-          color: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white,
-          display: 'block',
-        },
+      '& + $icon': {
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white,
+        display: 'block',
       },
+    },
 
-      '&:disabled': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
-        borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[3],
-        cursor: 'not-allowed',
+    '&:disabled': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[3],
+      cursor: 'not-allowed',
 
-        '& + $icon': {
-          color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
-        },
+      '& + $icon': {
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[5],
       },
-    }),
+    },
+  }),
 
-    icon: {
-      display: 'none',
-      pointerEvents: 'none',
-      width: '80%',
-      height: '80%',
-      position: 'absolute',
-      zIndex: 1,
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      margin: 'auto',
-    },
+  icon: {
+    display: 'none',
+    pointerEvents: 'none',
+    width: '80%',
+    height: '80%',
+    position: 'absolute',
+    zIndex: 1,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 'auto',
   },
-  { link: true }
-);
+});

src/Code/Code.styles.ts

@@ -1,3 +0,8 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getThemeColor, getFontStyles } from '@mantine/theme';
+import {
+  createMemoStyles,
+  MantineTheme,
+  getThemeColor,
+  getFontStyles,
+  hexToRgba,
+} from '@mantine/theme';
 
@@ -9,27 +14,31 @@ interface CodeStylesProps {
 
-export default createUseStyles(
-  {
-    code: ({ theme, color }: CodeStylesProps) => ({
-      ...getFontStyles(theme),
-      lineHeight: theme.lineHeight,
-      padding: [1, theme.spacing.xs / 2],
-      borderRadius: theme.radius.sm,
-      color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 1 : 9 }),
-      backgroundColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 0 }),
-      fontFamily: theme.fontFamilyMonospace,
-      fontSize: theme.fontSizes.xs,
-      border: `1px solid ${getThemeColor({
-        theme,
-        color,
-        shade: theme.colorScheme === 'dark' ? 9 : 3,
-      })}`,
-    }),
+export default createMemoStyles({
+  code: ({ theme, color }: CodeStylesProps) => ({
+    ...getFontStyles(theme),
+    lineHeight: theme.lineHeight,
+    padding: [1, theme.spacing.xs / 2],
+    borderRadius: theme.radius.sm,
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 1 : 9 }),
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 0 }),
+      theme.colorScheme === 'dark' ? 0.45 : 1
+    ),
+    fontFamily: theme.fontFamilyMonospace,
+    fontSize: theme.fontSizes.xs,
+    border: `1px solid ${
+      theme.colorScheme === 'dark'
+        ? 'transparent'
+        : getThemeColor({
+            theme,
+            color,
+            shade: 2,
+          })
+    }`,
+  }),
 
-    pre: ({ theme }: CodeStylesProps) => ({
-      padding: theme.spacing.xs,
-      margin: 0,
-      overflowX: 'auto',
-    }),
-  },
-  { link: true }
-);
+  pre: ({ theme }: CodeStylesProps) => ({
+    padding: theme.spacing.xs,
+    margin: 0,
+    overflowX: 'auto',
+  }),
+});

src/ColorSwatch/ColorSwatch.styles.ts

@@ -1,3 +0,8 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getSizeValue, MantineNumberSize, getFocusStyles } from '@mantine/theme';
+import {
+  createMemoStyles,
+  MantineTheme,
+  getSizeValue,
+  MantineNumberSize,
+  getFocusStyles,
+} from '@mantine/theme';
 
@@ -9,14 +14,11 @@ interface ColorSwatchStylesProps {
 
-export default createUseStyles(
-  {
-    colorSwatch: ({ theme, radius }: ColorSwatchStylesProps) => ({
-      ...getFocusStyles(theme),
-      border: 0,
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      appearance: 'none',
-      WebkitAppearance: 'none',
-      padding: 0,
-    }),
-  },
-  { link: true }
-);
+export default createMemoStyles({
+  colorSwatch: ({ theme, radius }: ColorSwatchStylesProps) => ({
+    ...getFocusStyles(theme),
+    border: 0,
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    padding: 0,
+  }),
+});

src/Container/Container.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
 
@@ -19,13 +18,10 @@ interface ContainerStylesProps {
 
-export default createUseStyles(
-  {
-    container: ({ fluid, size, padding, theme }: ContainerStylesProps) => ({
-      maxWidth: fluid ? '100%' : getSizeValue({ size, sizes }),
-      marginLeft: 'auto',
-      marginRight: 'auto',
-      paddingLeft: getSizeValue({ size: padding, sizes: theme.spacing }),
-      paddingRight: getSizeValue({ size: padding, sizes: theme.spacing }),
-    }),
-  },
-  { link: true }
-);
+export default createMemoStyles({
+  container: ({ fluid, size, padding, theme }: ContainerStylesProps) => ({
+    maxWidth: fluid ? '100%' : getSizeValue({ size, sizes }),
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    paddingLeft: getSizeValue({ size: padding, sizes: theme.spacing }),
+    paddingRight: getSizeValue({ size: padding, sizes: theme.spacing }),
+  }),
+});

src/Drawer/Drawer.styles.ts

@@ -1,4 +0,3 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getSizeValue } from '@mantine/theme';
 import React from 'react';
+import { createMemoStyles, MantineTheme, getSizeValue } from '@mantine/theme';
 
@@ -47,25 +46,22 @@ export const sizes = {
 
-export default createUseStyles(
-  {
-    noOverlay: {},
+export default createMemoStyles({
+  noOverlay: {},
 
-    wrapper: {
-      '&:not($noOverlay)': {
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      },
+  wrapper: {
+    '&:not($noOverlay)': {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
     },
+  },
 
-    drawer: ({ size, position }: DrawerStylesProps) => ({
-      ...getPositionStyles({ position, size }),
-      maxWidth: '100%',
-      maxHeight: '100vh',
-      position: 'fixed',
-      outline: 0,
-    }),
-  },
-  { link: true }
-);
+  drawer: ({ size, position }: DrawerStylesProps) => ({
+    ...getPositionStyles({ position, size }),
+    maxWidth: '100%',
+    maxHeight: '100vh',
+    position: 'fixed',
+    outline: 0,
+  }),
+});

src/Image/Image.styles.ts

@@ -1,3 +0,8 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineNumberSize, getSizeValue, getFontStyles } from '@mantine/theme';
+import {
+  createMemoStyles,
+  MantineTheme,
+  MantineNumberSize,
+  getSizeValue,
+  getFontStyles,
+} from '@mantine/theme';
 
@@ -9,35 +14,32 @@ interface ImageStylesProps {
 
-export default createUseStyles(
-  {
-    wrapper: {
-      position: 'relative',
-      overflow: 'hidden',
-    },
+export default createMemoStyles({
+  wrapper: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
 
-    image: ({ theme, radius }: ImageStylesProps) => ({
-      ...getFontStyles(theme),
-      display: 'block',
-      width: '100%',
-      height: '100%',
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      border: 0,
-    }),
+  image: ({ theme, radius }: ImageStylesProps) => ({
+    ...getFontStyles(theme),
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    border: 0,
+  }),
 
-    placeholderIcon: ({ theme, radius }: ImageStylesProps) => ({
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: '100%',
-      width: '100%',
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
-      position: 'absolute',
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-    }),
-  },
-  { link: true }
-);
+  placeholderIcon: ({ theme, radius }: ImageStylesProps) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    width: '100%',
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
+    position: 'absolute',
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  }),
+});

src/index.ts

 export * from '@mantine/theme';
+export * from '@mantine/utils';
 
-export type { InputProps } from './Input/Input';
-export type { InputWrapperBaseProps } from './InputWrapper/InputWrapper';
-export type { MantineTransition } from './Transition/Transition';
-
 export { ActionIcon, ACTION_ICON_SIZES } from './ActionIcon/ActionIcon';
@@ -15,3 +12,3 @@ export { Alert } from './Alert/Alert';
 export { Button, BUTTON_SIZES } from './Button/Button';
-export { Card, CardsGrid } from './Card/Card';
+export { Card } from './Card/Card';
 export { Checkbox, CHECKBOX_SIZES } from './Checkbox/Checkbox';
@@ -22,5 +19,6 @@ export { Code } from './Code/Code';
 export { Drawer, DRAWER_SIZES } from './Drawer/Drawer';
-export { ElementsGroup } from './ElementsGroup/ElementsGroup';
+export { Divider, DIVIDER_SIZES } from './Divider/Divider';
+export { Grid, Col } from './Grid/Grid';
+export { Group } from './Group/Group';
 export { Highlight } from './Highlight/Highlight';
-export { Hr, HR_SIZES } from './Hr/Hr';
 export { Image } from './Image/Image';
@@ -39,5 +37,7 @@ export { Input } from './Input/Input';
 export { PasswordInput } from './PasswordInput/PasswordInput';
+export { Popover } from './Popover/Popover';
 export { Portal } from './Portal/Portal';
 export { Progress, PROGRESS_SIZES } from './Progress/Progress';
 export { RadioGroup, Radio, RADIO_SIZES } from './RadioGroup/RadioGroup';
+export { SegmentedControl } from './SegmentedControl/SegmentedControl';
 export { Select } from './Select/Select';
@@ -56,1 +56,68 @@ export { Spoiler } from './Spoiler/Spoiler';
 export { TypographyStylesProvider } from './TypographyStylesProvider/TypographyStylesProvider';
+
+/** Deprecated – these components will be removed in next major release */
+
+// Hr renamed to Divider to support vertical orientation
+export { Divider as Hr, DIVIDER_SIZES as HR_SIZES } from './Divider/Divider';
+
+// ElementsGroup renamed to Group for simplicity
+export { Group as ElementsGroup } from './Group/Group';
+
+// CardsGrid replaced with more generic Grid component
+export { CardsGrid } from './Card/Card';
+export type { CardsGridProps } from './Card/Card';
+
+// Types are exported separately due to build issue: bundled types were not included with regular export
+export type { ActionIconProps } from './ActionIcon/ActionIcon';
+export type { AlertProps } from './Alert/Alert';
+export type { AvatarProps } from './Avatar/Avatar';
+export type { BadgeProps } from './Badge/Badge';
+export type { BlockquoteProps } from './Blockquote/Blockquote';
+export type { BreadcrumbsProps } from './Breadcrumbs/Breadcrumbs';
+export type { BurgerProps } from './Burger/Burger';
+export type { ButtonProps } from './Button/Button';
+export type { CardProps } from './Card/Card';
+export type { CheckboxProps } from './Checkbox/Checkbox';
+export type { CodeProps } from './Code/Code';
+export type { ColorSwatchProps } from './ColorSwatch/ColorSwatch';
+export type { ContainerProps } from './Container/Container';
+export type { DrawerProps } from './Drawer/Drawer';
+export type { DividerProps } from './Divider/Divider';
+export type { GridProps, ColProps } from './Grid/Grid';
+export type { GroupProps } from './Group/Group';
+export type { HighlightProps } from './Highlight/Highlight';
+export type { ImageProps } from './Image/Image';
+export type { InputProps } from './Input/Input';
+export type { InputWrapperBaseProps, InputWrapperProps } from './InputWrapper/InputWrapper';
+export type { KbdProps } from './Kbd/Kbd';
+export type { LoaderProps } from './Loader/Loader';
+export type { LoadingOverlayProps } from './LoadingOverlay/LoadingOverlay';
+export type { MenuProps, MenuItemProps, MenuBodyProps } from './Menu/Menu';
+export type { ModalProps } from './Modal/Modal';
+export type { NotificationProps } from './Notification/Notification';
+export type { NumberInputProps } from './NumberInput/NumberInput';
+export type { OverlayProps } from './Overlay/Overlay';
+export type { PaperProps } from './Paper/Paper';
+export type { PasswordInputProps } from './PasswordInput/PasswordInput';
+export type { PopoverProps } from './Popover/Popover';
+export type { PortalProps } from './Portal/Portal';
+export type { ProgressProps } from './Progress/Progress';
+export type { RadioGroupProps, RadioProps } from './RadioGroup/RadioGroup';
+export type { SegmentedControlProps } from './SegmentedControl/SegmentedControl';
+export type { SelectProps } from './Select/Select';
+export type { SpoilerProps } from './Spoiler/Spoiler';
+export type { SwitchProps } from './Switch/Switch';
+export type { TableProps } from './Table/Table';
+export type { TabsProps, TabProps } from './Tabs/Tabs';
+export type { TextProps, AnchorProps } from './Text/Text';
+export type { TextareaProps } from './Textarea/Textarea';
+export type { TextInputProps } from './TextInput/TextInput';
+export type { ThemeIconProps } from './ThemeIcon/ThemeIcon';
+export type { TitleProps } from './Title/Title';
+export type { TooltipProps } from './Tooltip/Tooltip';
+export type {
+  MantineTransition,
+  TransitionProps,
+  GroupedTransitionProps,
+} from './Transition/Transition';
+export type { TypographyStylesProviderProps } from './TypographyStylesProvider/TypographyStylesProvider';

src/Input/Input.styles.ts

@@ -1,3 +0,8 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineNumberSize, getFontStyles, getSizeValue } from '@mantine/theme';
+import {
+  MantineTheme,
+  MantineNumberSize,
+  getFontStyles,
+  getSizeValue,
+  createMemoStyles,
+} from '@mantine/theme';
 
@@ -9,182 +14,178 @@ interface InputStylesProps {
 
-export default createUseStyles(
-  {
-    withIcon: {},
+export default createMemoStyles({
+  withIcon: {},
 
-    inputWrapper: ({ radius, theme }: InputStylesProps) => ({
-      position: 'relative',
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+  inputWrapper: ({ radius, theme }: InputStylesProps) => ({
+    position: 'relative',
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
 
-      '&, & *': { boxSizing: 'border-box' },
-    }),
+    '&, & *': { boxSizing: 'border-box' },
+  }),
 
-    defaultVariant: ({ theme, radius }: InputStylesProps) => ({
-      '& $input': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
-        minHeight: 36,
-        padding: [7, theme.spacing.sm],
-        borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-        border: `1px solid ${
-          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
-        }`,
-        transition: 'border-color 100ms ease, box-shadow 100ms ease',
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+  defaultVariant: ({ theme, radius }: InputStylesProps) => ({
+    '& $input': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+      minHeight: 36,
+      paddingLeft: theme.spacing.md,
+      paddingRight: theme.spacing.md,
+      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+      border: `1px solid ${
+        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
+      }`,
+      transition: 'border-color 100ms ease, box-shadow 100ms ease',
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
 
-        '&:focus': {
-          outline: 'none',
-          borderColor: theme.colors[theme.primaryColor][6],
-          boxShadow: `0 0 4px ${theme.colors.gray[3]}`,
-        },
+      '&:focus': {
+        outline: 'none',
+        borderColor: theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 8 : 6],
       },
+    },
 
-      '&$invalid $input': {
-        borderColor: theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6],
-      },
+    '&$invalid $input': {
+      borderColor: theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6],
+    },
 
-      '& $withIcon': {
-        paddingLeft: 35,
-      },
+    '& $withIcon': {
+      paddingLeft: 35,
+    },
 
-      '& $icon': {
-        width: 36,
-      },
-    }),
+    '& $icon': {
+      width: 36,
+    },
+  }),
 
-    filledVariant: ({ theme, radius }: InputStylesProps) => ({
-      '& $input': {
-        minHeight: 36,
-        paddingLeft: theme.spacing.md,
-        paddingRight: theme.spacing.md,
-        borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-        border: '1px solid transparent',
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[1],
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+  filledVariant: ({ theme, radius }: InputStylesProps) => ({
+    '& $input': {
+      minHeight: 36,
+      paddingLeft: theme.spacing.md,
+      paddingRight: theme.spacing.md,
+      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+      border: '1px solid transparent',
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
 
-        '&:focus': {
-          outline: 'none',
-          borderColor: `${
-            theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
-          } !important`,
-          boxShadow: `0 0 4px ${theme.colors.gray[3]}`,
-        },
-
-        '&::placeholder': {
-          color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-        },
+      '&:focus': {
+        outline: 'none',
+        borderColor: `${
+          theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 8 : 6]
+        } !important`,
       },
 
-      '& $input:disabled': {
-        '&::placeholder': {
-          color: theme.colors.gray[5],
-        },
+      '&::placeholder': {
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
       },
+    },
 
-      '&$invalid $input': {
-        borderColor: theme.colorScheme === 'dark' ? theme.colors.red[4] : 'transparent',
-        backgroundColor: theme.colorScheme !== 'dark' && theme.colors.red[0],
+    '& $input:disabled': {
+      '&::placeholder': {
+        color: theme.colors.gray[5],
       },
+    },
 
-      '& $withIcon': {
-        paddingLeft: 35,
-      },
+    '&$invalid $input': {
+      borderColor: theme.colorScheme === 'dark' ? theme.colors.red[4] : 'transparent',
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.red[0],
+    },
 
-      '& $icon': {
-        width: 36,
-        color: theme.colors.gray[6],
-      },
-    }),
+    '& $withIcon': {
+      paddingLeft: 35,
+    },
 
-    unstyledVariant: ({ theme }: InputStylesProps) => ({
-      '& $input': {
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-        backgroundColor: 'transparent',
-        height: 28,
-        border: 0,
-        outline: 0,
+    '& $icon': {
+      width: 36,
+      color: theme.colors.gray[6],
+    },
+  }),
 
-        '&:disabled': {
-          backgroundColor: 'transparent',
-        },
-      },
+  unstyledVariant: ({ theme }: InputStylesProps) => ({
+    '& $input': {
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+      backgroundColor: 'transparent',
+      height: 28,
+      border: 0,
+      outline: 0,
 
-      '& $icon': {
-        width: 28,
+      '&:disabled': {
+        backgroundColor: 'transparent',
       },
+    },
 
-      '& $withIcon': {
-        paddingLeft: 34,
-      },
-    }),
+    '& $icon': {
+      width: 28,
+    },
 
-    input: ({ theme }: InputStylesProps) => ({
-      ...getFontStyles(theme),
-      WebkitTapHighlightColor: 'transparent',
-      lineHeight: theme.lineHeight,
-      appearance: 'none',
-      resize: 'none',
-      boxSizing: 'border-box',
-      fontSize: 14,
-      width: '100%',
-      color: theme.black,
-      display: 'block',
-      textAlign: 'left',
+    '& $withIcon': {
+      paddingLeft: 34,
+    },
+  }),
 
-      '&:disabled': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
-        opacity: 0.6,
-        cursor: 'not-allowed',
-      },
+  input: ({ theme }: InputStylesProps) => ({
+    ...getFontStyles(theme),
+    WebkitTapHighlightColor: 'transparent',
+    lineHeight: theme.lineHeight,
+    appearance: 'none',
+    resize: 'none',
+    boxSizing: 'border-box',
+    fontSize: theme.fontSizes.sm,
+    width: '100%',
+    color: theme.black,
+    display: 'block',
+    textAlign: 'left',
 
-      '&::placeholder': {
-        opacity: 1,
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[5],
-      },
+    '&:disabled': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+      opacity: 0.6,
+      cursor: 'not-allowed',
+    },
 
-      '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button, &::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration': {
-        appearance: 'none',
-      },
+    '&::placeholder': {
+      opacity: 1,
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[5],
+    },
 
-      '&[type=number]': {
-        MozAppearance: 'textfield',
-      },
-    }),
+    '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button, &::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration': {
+      appearance: 'none',
+    },
 
-    icon: ({ theme }: InputStylesProps) => ({
-      pointerEvents: 'none',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      bottom: 0,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }),
+    '&[type=number]': {
+      MozAppearance: 'textfield',
+    },
+  }),
 
-    invalid: ({ theme }: InputStylesProps) => ({
-      '& $input': {
-        color: theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6],
-        borderColor: theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6],
+  icon: ({ theme }: InputStylesProps) => ({
+    pointerEvents: 'none',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[5],
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }),
 
-        '&::placeholder': {
-          color: theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6],
-        },
-      },
+  invalid: ({ theme }: InputStylesProps) => ({
+    '& $input': {
+      color: theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6],
+      borderColor: theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6],
 
-      '& $icon': {
+      '&::placeholder': {
         color: theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6],
       },
-    }),
+    },
 
-    rightSection: {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      right: 0,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
+    '& $icon': {
+      color: theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6],
     },
+  }),
+
+  rightSection: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
-  { link: true }
-);
+});

src/InputWrapper/InputWrapper.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getFontStyles } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, getFontStyles } from '@mantine/theme';
 
@@ -8,34 +7,31 @@ interface InputWrapperStylesProps {
 
-export default createUseStyles(
-  {
-    inputWrapper: ({ theme }: InputWrapperStylesProps) => ({
-      ...getFontStyles(theme),
-      lineHeight: theme.lineHeight,
-    }),
+export default createMemoStyles({
+  inputWrapper: ({ theme }: InputWrapperStylesProps) => ({
+    ...getFontStyles(theme),
+    lineHeight: theme.lineHeight,
+  }),
 
-    label: ({ theme }: InputWrapperStylesProps) => ({
-      display: 'block',
-      marginBottom: 5,
-      fontSize: 14,
-      fontWeight: 500,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9],
-      wordBreak: 'break-word',
-    }),
+  label: ({ theme }: InputWrapperStylesProps) => ({
+    display: 'block',
+    marginBottom: 5,
+    fontSize: 14,
+    fontWeight: 500,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9],
+    wordBreak: 'break-word',
+  }),
 
-    error: ({ theme }: InputWrapperStylesProps) => ({
-      marginTop: theme.spacing.xs / 2,
-      wordBreak: 'break-word',
-    }),
+  error: ({ theme }: InputWrapperStylesProps) => ({
+    marginTop: theme.spacing.xs / 2,
+    wordBreak: 'break-word',
+  }),
 
-    description: ({ theme }: InputWrapperStylesProps) => ({
-      marginTop: theme.spacing.xs / 2,
-      marginBottom: theme.spacing.xs / 2,
-      wordBreak: 'break-word',
-    }),
+  description: ({ theme }: InputWrapperStylesProps) => ({
+    marginTop: theme.spacing.xs / 2,
+    marginBottom: theme.spacing.xs / 2,
+    wordBreak: 'break-word',
+  }),
 
-    required: ({ theme }: InputWrapperStylesProps) => ({
-      color: theme.colorScheme === 'dark' ? theme.colors.red[5] : theme.colors.red[7],
-    }),
-  },
-  { link: true }
-);
+  required: ({ theme }: InputWrapperStylesProps) => ({
+    color: theme.colorScheme === 'dark' ? theme.colors.red[5] : theme.colors.red[7],
+  }),
+});

src/Kbd/Kbd.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme } from '@mantine/theme';
+import { createMemoStyles, MantineTheme } from '@mantine/theme';
 
@@ -8,20 +7,19 @@ interface KbdStylesProps {
 
-export default createUseStyles(
-  {
-    kbd: ({ theme }: KbdStylesProps) => ({
-      lineHeight: theme.lineHeight,
-      fontFamily: theme.fontFamilyMonospace,
-      fontSize: theme.fontSizes.xs,
-      fontWeight: 700,
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
-      padding: [3, theme.spacing.xs / 2],
-      borderRadius: theme.radius.sm,
-      border: `1px solid ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[3]
-      }`,
-      borderBottomWidth: 3,
-    }),
-  },
-  { link: true }
-);
+export default createMemoStyles({
+  kbd: ({ theme }: KbdStylesProps) => ({
+    lineHeight: theme.lineHeight,
+    fontFamily: theme.fontFamilyMonospace,
+    fontSize: theme.fontSizes.xs,
+    fontWeight: 700,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[0],
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+    padding: [3, theme.spacing.xs / 2],
+    borderRadius: theme.radius.sm,
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[3]
+    }`,
+    borderBottom: `3px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[3]
+    }`,
+  }),
+});

src/LoadingOverlay/LoadingOverlay.styles.ts

 import { createUseStyles } from 'react-jss';
 
-export default createUseStyles(
-  {
-    loadingOverlay: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
+export default createUseStyles({
+  loadingOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
   },
-  { link: true }
-);
+});

src/Menu/MenuBody/MenuBody.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { getSizeValue, MantineNumberSize, MantineTheme } from '@mantine/theme';
+import { createMemoStyles, getSizeValue, MantineNumberSize, MantineTheme } from '@mantine/theme';
 
@@ -17,23 +16,20 @@ interface MenuStylesProps {
 
-export default createUseStyles(
-  {
-    menu: ({ theme, size }: MenuStylesProps) => ({
-      position: 'absolute',
-      width: getSizeValue({ size, sizes }),
-      overflow: 'hidden',
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white,
-      border: `1px solid ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[2]
-      }`,
-      paddingTop: theme.spacing.xs / 2,
-      paddingBottom: theme.spacing.xs / 2,
-    }),
+export default createMemoStyles({
+  menu: ({ theme, size }: MenuStylesProps) => ({
+    position: 'absolute',
+    width: getSizeValue({ size, sizes }),
+    overflow: 'hidden',
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2]
+    }`,
+    paddingTop: theme.spacing.xs / 2,
+    paddingBottom: theme.spacing.xs / 2,
+  }),
 
-    hr: ({ theme }: MenuStylesProps) => ({
-      borderTopColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
-      marginTop: theme.spacing.xs / 2,
-      marginBottom: theme.spacing.xs / 2,
-    }),
-  },
-  { link: true }
-);
+  hr: ({ theme }: MenuStylesProps) => ({
+    borderTopColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
+    marginTop: theme.spacing.xs / 2,
+    marginBottom: theme.spacing.xs / 2,
+  }),
+});

src/Menu/MenuButton/MenuButton.styles.ts

@@ -1,3 +0,2 @@
-import { MantineTheme, getFontStyles, getThemeColor } from '@mantine/theme';
-import { createUseStyles } from 'react-jss';
+import { MantineTheme, getFontStyles, getThemeColor, createMemoStyles } from '@mantine/theme';
 
@@ -9,64 +8,64 @@ interface MenuButtonStylesProps {
 
-export default createUseStyles(
-  {
-    hovered: {},
+export default createMemoStyles({
+  hovered: {},
 
-    item: ({ theme, color }: MenuButtonStylesProps) => ({
-      ...getFontStyles(theme),
-      WebkitTapHighlightColor: 'transparent',
-      fontSize: theme.fontSizes.sm,
-      border: 0,
-      backgroundColor: 'transparent',
-      outline: 0,
-      width: '100%',
-      textAlign: 'left',
-      height: 32,
-      padding: [0, theme.spacing.sm],
-      cursor: 'pointer',
-      color: color
-        ? getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 })
-        : theme.colorScheme === 'dark'
-        ? theme.colors.dark[0]
-        : theme.colors.gray[9],
+  item: ({ theme, color }: MenuButtonStylesProps) => ({
+    ...getFontStyles(theme),
+    WebkitTapHighlightColor: 'transparent',
+    fontSize: theme.fontSizes.sm,
+    border: 0,
+    backgroundColor: 'transparent',
+    outline: 0,
+    width: '100%',
+    textAlign: 'left',
+    display: 'inline-block',
+    textDecoration: 'none',
+    height: 32,
+    boxSizing: 'border-box',
+    padding: [0, theme.spacing.sm],
+    cursor: 'pointer',
+    color: color
+      ? getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 })
+      : theme.colorScheme === 'dark'
+      ? theme.colors.dark[0]
+      : theme.colors.gray[9],
 
-      '&:disabled': {
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[5],
-        cursor: 'not-allowed',
-      },
+    '&:disabled': {
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[5],
+      cursor: 'not-allowed',
+    },
 
-      '&$hovered:not(:disabled), &:not(:disabled):hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    '&$hovered:not(:disabled), &:not(:disabled):hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1],
 
-        '&:not(:disabled):active': {
-          backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],
-        },
+      '&:not(:disabled):active': {
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],
       },
-    }),
-
-    inner: {
-      display: 'flex',
-      alignItems: 'center',
     },
+  }),
 
-    body: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      flex: 1,
-    },
+  inner: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+  },
 
-    icon: ({ theme }: MenuButtonStylesProps) => ({
-      marginRight: theme.spacing.xs,
+  body: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flex: 1,
+  },
 
-      '& > *': {
-        display: 'block',
-      },
-    }),
+  icon: ({ theme }: MenuButtonStylesProps) => ({
+    marginRight: theme.spacing.xs,
 
-    label: {
-      lineHeight: 1,
+    '& *': {
+      display: 'block',
     },
+  }),
+
+  label: {
+    lineHeight: 1,
   },
-  { link: true }
-);
+});

src/Modal/Modal.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getSizeValue } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, getSizeValue } from '@mantine/theme';
 
@@ -19,52 +18,50 @@ export const sizes = {
 
-export default createUseStyles(
-  {
-    wrapper: {
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-    },
+export default createMemoStyles({
+  wrapper: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
 
-    inner: ({ theme }: ModalStylesProps) => ({
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      overflowY: 'auto',
-      padding: [theme.spacing.xl * 2, theme.spacing.md],
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'flex-start',
-    }),
+  inner: ({ theme }: ModalStylesProps) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflowY: 'auto',
+    padding: [theme.spacing.xl * 2, theme.spacing.md],
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  }),
 
-    title: ({ theme }: ModalStylesProps) => ({
-      marginRight: theme.spacing.md,
-      textOverflow: 'ellipsis',
-      display: 'block',
-      wordBreak: 'break-word',
-    }),
+  title: ({ theme }: ModalStylesProps) => ({
+    marginRight: theme.spacing.md,
+    textOverflow: 'ellipsis',
+    display: 'block',
+    wordBreak: 'break-word',
+  }),
 
-    modal: ({ theme, size }: ModalStylesProps) => ({
-      width: getSizeValue({ sizes, size }),
-      padding: theme.spacing.lg,
-      outline: 0,
-    }),
+  modal: ({ theme, size }: ModalStylesProps) => ({
+    width: getSizeValue({ sizes, size }),
+    padding: theme.spacing.lg,
+    outline: 0,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+  }),
 
-    header: ({ theme }: ModalStylesProps) => ({
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      marginBottom: theme.spacing.md,
-    }),
+  header: ({ theme }: ModalStylesProps) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: theme.spacing.md,
+  }),
 
-    body: ({ overflow }: ModalStylesProps) => ({
-      maxHeight: overflow === 'inside' && 'calc(100vh - 185px)',
-      overflowY: overflow === 'inside' && 'auto',
-      wordBreak: 'break-word',
-    }),
-  },
-  { link: true }
-);
+  body: ({ overflow }: ModalStylesProps) => ({
+    maxHeight: overflow === 'inside' && 'calc(100vh - 185px)',
+    overflowY: overflow === 'inside' && 'auto',
+    wordBreak: 'break-word',
+  }),
+});

src/Notification/Notification.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getThemeColor } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, getThemeColor, hexToRgba } from '@mantine/theme';
 
@@ -10,87 +9,91 @@ interface NotificationStyles {
 
-export default createUseStyles(
-  {
-    withIcon: {
-      paddingLeft: '10px !important',
+export default createMemoStyles({
+  withIcon: {
+    paddingLeft: '10px !important',
 
-      '&::before': {
-        display: 'none !important',
-      },
+    '&::before': {
+      display: 'none !important',
     },
+  },
 
-    notification: ({ color, theme }: NotificationStyles) => ({
-      boxSizing: 'border-box',
-      position: 'relative',
-      display: 'flex',
-      alignItems: 'center',
-      paddingLeft: 22,
-      paddingRight: 5,
-      paddingTop: 10,
-      paddingBottom: 10,
+  notification: ({ color, theme }: NotificationStyles) => ({
+    boxSizing: 'border-box',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: 22,
+    paddingRight: 5,
+    paddingTop: 10,
+    paddingBottom: 10,
+    borderRadius: 4,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2]
+    }`,
+
+    '&::before': {
+      content: "''",
+      display: 'block',
+      position: 'absolute',
+      width: 6,
+      top: 4,
+      bottom: 4,
+      left: 4,
       borderRadius: 4,
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white,
-      border: `1px solid ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
-      }`,
+      backgroundColor: getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 7 : 6,
+      }),
+    },
 
-      '&::before': {
-        content: "''",
-        display: 'block',
-        position: 'absolute',
-        width: 6,
-        top: 4,
-        bottom: 4,
-        left: 4,
-        borderRadius: 4,
-        backgroundColor: getThemeColor({ theme, color, shade: 6 }),
-      },
+    '& $icon': {
+      backgroundColor: hexToRgba(
+        getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 7 : 6 }),
+        theme.colorScheme === 'dark' ? 0.7 : 1
+      ),
+      color: theme.white,
+    },
+  }),
 
-      '& $icon': {
-        backgroundColor: getThemeColor({ theme, color, shade: 6 }),
-        color: theme.white,
-      },
-    }),
+  body: ({ disallowClose }: NotificationStyles) => ({
+    flex: 1,
+    maxWidth: !disallowClose ? 'calc(100% - 40px)' : '100%', // space for close button and margin
+    marginRight: 10,
+  }),
 
-    body: ({ disallowClose }: NotificationStyles) => ({
-      flex: 1,
-      maxWidth: !disallowClose ? 'calc(100% - 40px)' : '100%', // space for close button and margin
-      marginRight: 10,
-    }),
+  loader: ({ theme }: NotificationStyles) => ({
+    marginRight: theme.spacing.md,
+  }),
 
-    loader: ({ theme }: NotificationStyles) => ({
-      marginRight: theme.spacing.md,
-    }),
+  icon: ({ theme }: NotificationStyles) => ({
+    boxSizing: 'border-box',
+    marginRight: theme.spacing.md,
+    width: 28,
+    height: 28,
+    borderRadius: 28,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: theme.white,
+  }),
 
-    icon: ({ theme }: NotificationStyles) => ({
-      boxSizing: 'border-box',
-      marginRight: theme.spacing.md,
-      width: 28,
-      height: 28,
-      borderRadius: 28,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      color: theme.white,
-    }),
+  title: ({ theme }: NotificationStyles) => ({
+    lineHeight: 1.4,
+    marginBottom: 2,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    color: theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[9],
+  }),
 
-    title: ({ theme }: NotificationStyles) => ({
-      lineHeight: 1.4,
-      marginBottom: 2,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      color: theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[9],
-    }),
+  description: ({ theme }: NotificationStyles) => ({
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+    lineHeight: 1.4,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
 
-    description: ({ theme }: NotificationStyles) => ({
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-      lineHeight: 1.4,
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-
-      '&:only-child': {
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-      },
-    }),
-  },
-  { link: true }
-);
+    '&:only-child': {
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+    },
+  }),
+});

src/NumberInput/NumberInput.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
 
@@ -11,80 +10,79 @@ interface NumberInputStylesProps {
 
-export default createUseStyles(
-  {
-    rightSection: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: 'calc(100% - 2px)',
-      margin: 1,
-      marginRight: 1,
-    },
+export default createMemoStyles({
+  rightSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: 'calc(100% - 2px)',
+    margin: 1,
+    marginRight: 1,
+  },
 
-    control: ({ theme }: NumberInputStylesProps) => ({
-      position: 'relative',
-      flex: '0 0 50%',
-      boxSizing: 'border-box',
-      width: CONTROL_WIDTH,
-      border: `1px solid ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
-      }`,
-      borderTop: 0,
-      borderRight: 0,
-      backgroundColor: 'transparent',
-      marginRight: 1,
+  control: ({ theme }: NumberInputStylesProps) => ({
+    position: 'relative',
+    flex: '0 0 50%',
+    boxSizing: 'border-box',
+    width: CONTROL_WIDTH,
+    borderBottom: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
+    }`,
+    borderLeft: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
+    }`,
+    borderTop: 0,
+    borderRight: 0,
+    backgroundColor: 'transparent',
+    marginRight: 1,
 
-      '&:not(:disabled):hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-      },
+    '&:not(:disabled):hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    },
 
-      '&::after': {
-        position: 'absolute',
-        top: 'calc(50% - 2.5px)',
-        left: 'calc(50% - 4.5px)',
-        content: '""',
-        display: 'block',
-        width: 0,
-        height: 0,
-        borderStyle: 'solid',
-      },
-    }),
+    '&::after': {
+      position: 'absolute',
+      top: 'calc(50% - 2.5px)',
+      left: 'calc(50% - 4.5px)',
+      content: '""',
+      display: 'block',
+      width: 0,
+      height: 0,
+      borderStyle: 'solid',
+    },
+  }),
 
-    controlUp: ({ theme, radius }: NumberInputStylesProps) => ({
-      borderTopRightRadius: getSizeValue({ size: radius, sizes: theme.radius }) - 1,
+  controlUp: ({ theme, radius }: NumberInputStylesProps) => ({
+    borderTopRightRadius: getSizeValue({ size: radius, sizes: theme.radius }) - 1,
 
-      '&::after': {
-        borderWidth: [0, 5, 5, 5],
-        borderColor: [
-          'transparent',
-          'transparent',
-          theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-          'transparent',
-        ],
-      },
+    '&::after': {
+      borderWidth: [0, 5, 5, 5],
+      borderColor: [
+        'transparent',
+        'transparent',
+        theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+        'transparent',
+      ],
+    },
 
-      '&:disabled::after': {
-        borderBottomColor:
-          theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[5],
-      },
-    }),
+    '&:disabled::after': {
+      borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[5],
+    },
+  }),
 
-    controlDown: ({ theme, radius }: NumberInputStylesProps) => ({
-      borderBottomRightRadius: getSizeValue({ size: radius, sizes: theme.radius }) - 1,
-      borderBottom: 0,
+  controlDown: ({ theme, radius }: NumberInputStylesProps) => ({
+    borderBottomRightRadius: getSizeValue({ size: radius, sizes: theme.radius }) - 1,
+    borderBottom: 0,
 
-      '&::after': {
-        borderWidth: [5, 5, 0, 5],
-        borderColor: [
-          theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-          'transparent',
-          'transparent',
-          'transparent',
-        ],
-      },
+    '&::after': {
+      borderWidth: [5, 5, 0, 5],
+      borderColor: [
+        theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+        'transparent',
+        'transparent',
+        'transparent',
+      ],
+    },
 
-      '&:disabled::after': {
-        borderTopColor: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[5],
-      },
-    }),
-  },
-  { link: true }
-);
+    '&:disabled::after': {
+      borderTopColor: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[5],
+    },
+  }),
+});

src/Paper/Paper.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
 
@@ -11,13 +10,10 @@ interface PaperStylesProps {
 
-export default createUseStyles(
-  {
-    paper: ({ theme, radius, shadow, padding }: PaperStylesProps) => ({
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
-      boxSizing: 'border-box',
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      boxShadow: theme.shadows[shadow] || shadow || 'none',
-      padding: getSizeValue({ size: padding, sizes: theme.spacing }),
-    }),
-  },
-  { link: true }
-);
+export default createMemoStyles({
+  paper: ({ theme, radius, shadow, padding }: PaperStylesProps) => ({
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+    boxSizing: 'border-box',
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    boxShadow: theme.shadows[shadow] || shadow || 'none',
+    padding: getSizeValue({ size: padding, sizes: theme.spacing }),
+  }),
+});

src/Progress/Progress.styles.ts

@@ -1,3 +0,8 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineNumberSize, getThemeColor, getSizeValue } from '@mantine/theme';
+import {
+  createMemoStyles,
+  MantineTheme,
+  MantineNumberSize,
+  getThemeColor,
+  getSizeValue,
+} from '@mantine/theme';
 
@@ -21,23 +26,20 @@ export const sizes = {
 
-export default createUseStyles(
-  {
-    progress: ({ radius, size, theme }: ProgressStylesProps) => ({
-      height: getSizeValue({ size, sizes }),
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[2],
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      overflow: 'hidden',
-    }),
+export default createMemoStyles({
+  progress: ({ radius, size, theme }: ProgressStylesProps) => ({
+    height: getSizeValue({ size, sizes }),
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    overflow: 'hidden',
+  }),
 
-    bar: ({ theme, color, radius, reduceMotion, striped }: ProgressStylesProps) => ({
-      height: '100%',
-      backgroundColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      transition: reduceMotion ? 'none' : `width 200ms ${theme.transitionTimingFunction}`,
-      backgroundSize: [theme.spacing.md, theme.spacing.md],
-      backgroundImage: striped
-        ? 'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)'
-        : 'none',
-    }),
-  },
-  { link: true }
-);
+  bar: ({ theme, color, radius, reduceMotion, striped }: ProgressStylesProps) => ({
+    height: '100%',
+    backgroundColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
+    borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    transition: reduceMotion ? 'none' : `width 200ms ${theme.transitionTimingFunction}`,
+    backgroundSize: [theme.spacing.md, theme.spacing.md],
+    backgroundImage: striped
+      ? 'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)'
+      : 'none',
+  }),
+});

src/RadioGroup/Radio/Radio.styles.ts

@@ -1,3 +0,3 @@
-import { createUseStyles } from 'react-jss';
 import {
+  createMemoStyles,
   MantineTheme,
@@ -25,69 +25,65 @@ MantineSize,
 
-export default createUseStyles(
-  {
-    labelDisabled: {},
+export default createMemoStyles({
+  labelDisabled: {},
 
-    wrapper: {
-      display: 'flex',
-      alignItems: 'center',
-      WebkitTapHighlightColor: 'transparent',
-    },
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    WebkitTapHighlightColor: 'transparent',
+  },
 
-    radio: ({ theme, size, color }: RadioStylesProps) => ({
-      ...getFocusStyles(theme),
-      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[0],
-      border: `1px solid ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4]
-      }`,
-      position: 'relative',
-      appearance: 'none',
-      width: getSizeValue({ sizes, size }),
-      height: getSizeValue({ sizes, size }),
-      borderRadius: getSizeValue({ sizes, size }),
-      margin: 0,
-      marginRight: theme.spacing.sm,
-      background: 'red',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
+  radio: ({ theme, size, color }: RadioStylesProps) => ({
+    ...getFocusStyles(theme),
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[0],
+    border: `1px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
+    }`,
+    position: 'relative',
+    appearance: 'none',
+    width: getSizeValue({ sizes, size }),
+    height: getSizeValue({ sizes, size }),
+    borderRadius: getSizeValue({ sizes, size }),
+    margin: 0,
+    marginRight: theme.spacing.sm,
+    background: 'red',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
 
-      '&:checked': {
-        background: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
-        borderColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
+    '&:checked': {
+      background: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
+      borderColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }),
 
-        '&::before': {
-          content: '""',
-          display: 'block',
-          backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
-          width: getSizeValue({ sizes, size }) / 2,
-          height: getSizeValue({ sizes, size }) / 2,
-          borderRadius: getSizeValue({ sizes, size }) / 2,
-        },
+      '&::before': {
+        content: '""',
+        display: 'block',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+        width: getSizeValue({ sizes, size }) / 2,
+        height: getSizeValue({ sizes, size }) / 2,
+        borderRadius: getSizeValue({ sizes, size }) / 2,
       },
+    },
 
-      '&:disabled': {
-        borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4],
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1],
+    '&:disabled': {
+      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[4],
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
 
-        '&::before': {
-          backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[4],
-        },
+      '&::before': {
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[4],
       },
-    }),
+    },
+  }),
 
-    label: ({ theme, size }: RadioStylesProps) => ({
-      ...getFontStyles(theme),
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: theme.fontSizes[size] || theme.fontSizes.md,
-      lineHeight: `${getSizeValue({ sizes, size })}px`,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+  label: ({ theme, size }: RadioStylesProps) => ({
+    ...getFontStyles(theme),
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: theme.fontSizes[size] || theme.fontSizes.md,
+    lineHeight: `${getSizeValue({ sizes, size })}px`,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
 
-      '&$labelDisabled': {
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
-      },
-    }),
-  },
-  { link: true }
-);
+    '&$labelDisabled': {
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[5],
+    },
+  }),
+});

src/RadioGroup/RadioGroup.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, MantineNumberSize, getSizeValue } from '@mantine/theme';
 
@@ -10,23 +9,20 @@ interface RadioGroupStylesProps {
 
-export default createUseStyles(
-  {
-    wrapper: ({ theme, spacing, variant }: RadioGroupStylesProps) => ({
-      display: 'flex',
-      flexWrap: 'wrap',
-      flexDirection: variant === 'vertical' ? 'column' : 'row',
-      margin: (getSizeValue({ sizes: theme.spacing, size: spacing }) / 2) * -1,
+export default createMemoStyles({
+  wrapper: ({ theme, spacing, variant }: RadioGroupStylesProps) => ({
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: variant === 'vertical' ? 'column' : 'row',
+    margin: (getSizeValue({ sizes: theme.spacing, size: spacing }) / 2) * -1,
+    marginTop:
+      (getSizeValue({ sizes: theme.spacing, size: spacing }) / 4) *
+      (variant === 'vertical' ? 1 : -1),
+
+    '& [data-mantine-radio]': {
+      margin: getSizeValue({ sizes: theme.spacing, size: spacing }) / 2,
       marginTop:
-        (getSizeValue({ sizes: theme.spacing, size: spacing }) / 4) *
-        (variant === 'vertical' ? 1 : -1),
-
-      '& [data-mantine-radio]': {
-        margin: getSizeValue({ sizes: theme.spacing, size: spacing }) / 2,
-        marginTop:
-          variant === 'vertical' && getSizeValue({ sizes: theme.spacing, size: spacing }) / 4,
-        marginBottom:
-          variant === 'vertical' && getSizeValue({ sizes: theme.spacing, size: spacing }) / 4,
-      },
-    }),
-  },
-  { link: true }
-);
+        variant === 'vertical' && getSizeValue({ sizes: theme.spacing, size: spacing }) / 4,
+      marginBottom:
+        variant === 'vertical' && getSizeValue({ sizes: theme.spacing, size: spacing }) / 4,
+    },
+  }),
+});

src/Spoiler/Spoiler.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme } from '@mantine/theme';
+import { createMemoStyles, MantineTheme } from '@mantine/theme';
 
@@ -9,16 +8,13 @@ interface SpoilerStylesProps {
 
-export default createUseStyles(
-  {
-    spoiler: {
-      position: 'relative',
-    },
+export default createMemoStyles({
+  spoiler: {
+    position: 'relative',
+  },
 
-    content: ({ transitionDuration }: SpoilerStylesProps) => ({
-      overflow: 'hidden',
-      transitionProperty: 'max-height',
-      transitionTimingFunction: 'ease',
-      transitionDuration: transitionDuration || 0,
-    }),
-  },
-  { link: true }
-);
+  content: ({ transitionDuration }: SpoilerStylesProps) => ({
+    overflow: 'hidden',
+    transitionProperty: 'max-height',
+    transitionTimingFunction: 'ease',
+    transitionDuration: transitionDuration || 0,
+  }),
+});

src/Switch/Switch.styles.ts

@@ -1,3 +0,3 @@
-import { createUseStyles } from 'react-jss';
 import {
+  createMemoStyles,
   MantineTheme,
@@ -49,88 +49,82 @@ MantineNumberSize,
 
-export default createUseStyles(
-  {
-    wrapper: {
+export default createMemoStyles({
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  switch: ({ size, radius, theme, reduceMotion, color }: SwitchStylesProps) => {
+    const handleSize = getSizeValue({ size, sizes: handleSizes });
+    const borderRadius = getSizeValue({ size: radius, sizes: theme.radius });
+
+    return {
+      ...getFocusStyles(theme),
+      WebkitTapHighlightColor: 'transparent',
+      position: 'relative',
+      borderRadius,
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+      border: `1px solid ${
+        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
+      }`,
+      height: getSizeValue({ size, sizes: switchHeight }),
+      width: getSizeValue({ size, sizes: switchWidth }),
+      minWidth: getSizeValue({ size, sizes: switchWidth }),
+      padding: [0, 2],
+      margin: 0,
+      transitionProperty: 'background-color, border-color',
+      transitionTimingFunction: theme.transitionTimingFunction,
+      transitionDuration: reduceMotion ? '1ms' : '150ms',
+      boxSizing: 'border-box',
+      appearance: 'none',
       display: 'flex',
       alignItems: 'center',
-    },
 
-    switch: ({ size, radius, theme, reduceMotion, color }: SwitchStylesProps) => {
-      const handleSize = getSizeValue({ size, sizes: handleSizes });
-      const borderRadius = getSizeValue({ size: radius, sizes: theme.radius });
-
-      return {
-        ...getFocusStyles(theme),
-        WebkitTapHighlightColor: 'transparent',
-        position: 'relative',
+      '&::before': {
         borderRadius,
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[2],
-        border: `1px solid ${
-          theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[3]
-        }`,
-        height: getSizeValue({ size, sizes: switchHeight }),
-        width: getSizeValue({ size, sizes: switchWidth }),
-        minWidth: getSizeValue({ size, sizes: switchWidth }),
-        padding: [0, 2],
-        margin: 0,
-        transitionProperty: 'background-color, border-color',
-        transitionTimingFunction: theme.transitionTimingFunction,
-        transitionDuration: reduceMotion ? '1ms' : '150ms',
         boxSizing: 'border-box',
-        appearance: 'none',
-        display: 'flex',
-        alignItems: 'center',
+        content: "''",
+        display: 'block',
+        backgroundColor: theme.white,
+        height: handleSize,
+        width: handleSize,
+        border: `1px solid ${theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[3]}`,
+        transition: reduceMotion ? 'none' : `transform 150ms ${theme.transitionTimingFunction}`,
+      },
 
+      '&:checked': {
+        backgroundColor: getThemeColor({ theme, color, shade: 6 }),
+        borderColor: getThemeColor({ theme, color, shade: 6 }),
+
         '&::before': {
-          borderRadius,
-          boxSizing: 'border-box',
-          content: "''",
-          display: 'block',
-          backgroundColor: theme.white,
-          height: handleSize,
-          width: handleSize,
-          border: `1px solid ${
-            theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[3]
-          }`,
-          transition: reduceMotion ? 'none' : `transform 150ms ${theme.transitionTimingFunction}`,
+          transform: `translateX(${
+            getSizeValue({ size, sizes: switchWidth }) -
+            getSizeValue({ size, sizes: handleSizes }) -
+            6 // borderWidth: 2 + padding: 2 * 2
+          }px)`,
+          borderColor: theme.white,
         },
+      },
 
-        '&:checked': {
-          backgroundColor: getThemeColor({ theme, color, shade: 6 }),
-          borderColor: getThemeColor({ theme, color, shade: 6 }),
+      '&:disabled': {
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+        borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+        cursor: 'not-allowed',
 
-          '&::before': {
-            transform: `translateX(${
-              getSizeValue({ size, sizes: switchWidth }) -
-              getSizeValue({ size, sizes: handleSizes }) -
-              6 // borderWidth: 2 + padding: 2 * 2
-            }px)`,
-            borderColor: getThemeColor({ theme, color, shade: 6 }),
-          },
-        },
-
-        '&:disabled': {
+        '&::before': {
+          borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
           backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
-          borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
-          cursor: 'not-allowed',
-
-          '&::before': {
-            borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
-            backgroundColor:
-              theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[0],
-          },
+            theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[0],
         },
-      };
-    },
+      },
+    };
+  },
 
-    label: ({ theme, size }: SwitchStylesProps) => ({
-      ...getFontStyles(theme),
-      WebkitTapHighlightColor: 'transparent',
-      fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
-      fontFamily: theme.fontFamily,
-      paddingLeft: theme.spacing.sm,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-    }),
-  },
-  { link: true }
-);
+  label: ({ theme, size }: SwitchStylesProps) => ({
+    ...getFontStyles(theme),
+    WebkitTapHighlightColor: 'transparent',
+    fontSize: getSizeValue({ size, sizes: theme.fontSizes }),
+    fontFamily: theme.fontFamily,
+    paddingLeft: theme.spacing.sm,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+  }),
+});

src/Table/Table.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getFontStyles } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, getFontStyles } from '@mantine/theme';
 
@@ -9,64 +8,61 @@ interface TableStylesProps {
 
-export default createUseStyles(
-  {
-    striped: {},
-    hover: {},
+export default createMemoStyles({
+  striped: {},
+  hover: {},
 
-    table: ({ theme, captionSide }: TableStylesProps) => ({
-      ...getFontStyles(theme),
-      width: '100%',
-      borderCollapse: 'collapse',
-      captionSide,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-      lineHeight: theme.lineHeight,
+  table: ({ theme, captionSide }: TableStylesProps) => ({
+    ...getFontStyles(theme),
+    width: '100%',
+    borderCollapse: 'collapse',
+    captionSide,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+    lineHeight: theme.lineHeight,
 
-      '& caption': {
-        marginTop: captionSide === 'top' ? 0 : theme.spacing.xs,
-        marginBottom: captionSide === 'bottom' ? 0 : theme.spacing.xs,
-        fontSize: theme.fontSizes.sm,
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-      },
+    '& caption': {
+      marginTop: captionSide === 'top' ? 0 : theme.spacing.xs,
+      marginBottom: captionSide === 'bottom' ? 0 : theme.spacing.xs,
+      fontSize: theme.fontSizes.sm,
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+    },
 
-      '& thead tr th, & tfoot tr th': {
-        textAlign: 'left',
-        fontWeight: 'bold',
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
-        fontSize: 14,
-        padding: [7, 10],
-      },
+    '& thead tr th, & tfoot tr th': {
+      textAlign: 'left',
+      fontWeight: 'bold',
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+      fontSize: 14,
+      padding: [7, 10],
+    },
 
-      '& thead tr th': {
-        borderBottom: `1px solid ${
-          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
-        }`,
-      },
+    '& thead tr th': {
+      borderBottom: `1px solid ${
+        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
+      }`,
+    },
 
-      '& tfoot tr th': {
-        borderTop: `1px solid ${
-          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
-        }`,
-      },
+    '& tfoot tr th': {
+      borderTop: `1px solid ${
+        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
+      }`,
+    },
 
-      '& tbody tr td': {
-        padding: [7, 10],
-        borderBottom: `1px solid ${
-          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
-        }`,
-        fontSize: 14,
-      },
+    '& tbody tr td': {
+      padding: [7, 10],
+      borderBottom: `1px solid ${
+        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
+      }`,
+      fontSize: 14,
+    },
 
-      '& tbody tr:last-of-type td': {
-        borderBottom: 'none',
-      },
+    '& tbody tr:last-of-type td': {
+      borderBottom: 'none',
+    },
 
-      '&$striped tbody tr:nth-of-type(odd)': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
-      },
+    '&$striped tbody tr:nth-of-type(odd)': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+    },
 
-      '&$hover tbody tr:hover': {
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1],
-      },
-    }),
-  },
-  { link: true }
-);
+    '&$hover tbody tr:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    },
+  }),
+});

src/Tabs/TabControl/TabControl.styles.ts

@@ -1,3 +0,8 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getFontStyles, getFocusStyles, getThemeColor } from '@mantine/theme';
+import {
+  createMemoStyles,
+  MantineTheme,
+  getFontStyles,
+  getFocusStyles,
+  getThemeColor,
+} from '@mantine/theme';
 
@@ -10,3 +15,3 @@ interface TabControlStylesProps {
 
-export default createUseStyles({
+export default createMemoStyles({
   tab: ({ theme, reduceMotion }: TabControlStylesProps) => ({
@@ -13,0 +18,0 @@ ...getFontStyles(theme),

src/Tabs/Tabs.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme } from '@mantine/theme';
+import { createMemoStyles, MantineTheme } from '@mantine/theme';
 
@@ -8,19 +7,16 @@ interface TabsStylesProps {
 
-export default createUseStyles(
-  {
-    tabs: ({ theme }: TabsStylesProps) => ({
-      borderBottom: `2px solid ${
-        theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[3]
-      }`,
-    }),
+export default createMemoStyles({
+  tabs: ({ theme }: TabsStylesProps) => ({
+    borderBottom: `2px solid ${
+      theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[3]
+    }`,
+  }),
 
-    tabsInner: {
-      marginBottom: -2,
-    },
+  tabsInner: {
+    marginBottom: -2,
+  },
 
-    body: ({ theme }: TabsStylesProps) => ({
-      paddingTop: theme.spacing.sm,
-    }),
-  },
-  { link: true }
-);
+  body: ({ theme }: TabsStylesProps) => ({
+    paddingTop: theme.spacing.sm,
+  }),
+});

src/Text/Text.styles.ts

@@ -1,3 +0,8 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineSize, getFocusStyles, getFontStyles } from '@mantine/theme';
+import {
+  createMemoStyles,
+  MantineTheme,
+  MantineSize,
+  getFocusStyles,
+  getFontStyles,
+} from '@mantine/theme';
 
@@ -13,26 +18,23 @@ export type TextVariant = 'text' | 'link';
 
-export default createUseStyles(
-  {
-    text: ({ theme, color, variant, size }: TextStylesProps) => ({
-      ...getFontStyles(theme),
-      ...getFocusStyles(theme),
-      color:
-        color in theme.colors
-          ? theme.colors[color][theme.colorScheme === 'dark' ? 4 : 6]
-          : variant === 'link'
-          ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
-          : theme.colorScheme === 'dark'
-          ? theme.colors.dark[0]
-          : theme.black,
-      fontSize: theme.fontSizes[size],
-      lineHeight: theme.lineHeight,
-      textDecoration: 'none',
-      WebkitTapHighlightColor: 'transparent',
+export default createMemoStyles({
+  text: ({ theme, color, variant, size }: TextStylesProps) => ({
+    ...getFontStyles(theme),
+    ...getFocusStyles(theme),
+    color:
+      color in theme.colors
+        ? theme.colors[color][theme.colorScheme === 'dark' ? 4 : 6]
+        : variant === 'link'
+        ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
+        : theme.colorScheme === 'dark'
+        ? theme.colors.dark[0]
+        : theme.black,
+    fontSize: theme.fontSizes[size],
+    lineHeight: theme.lineHeight,
+    textDecoration: 'none',
+    WebkitTapHighlightColor: 'transparent',
 
-      '&:hover': {
-        textDecoration: variant === 'link' ? 'underline' : 'none',
-      },
-    }),
-  },
-  { link: true }
-);
+    '&:hover': {
+      textDecoration: variant === 'link' ? 'underline' : 'none',
+    },
+  }),
+});

src/ThemeIcon/ThemeIcon.styles.ts

@@ -1,3 +0,9 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, MantineNumberSize, getSizeValue, getThemeColor } from '@mantine/theme';
+import {
+  createMemoStyles,
+  MantineTheme,
+  MantineNumberSize,
+  getSizeValue,
+  getThemeColor,
+  hexToRgba,
+} from '@mantine/theme';
 
@@ -9,3 +15,2 @@ interface ThemeIconStylesProps {
   radius: MantineNumberSize;
-  variant: 'filled' | 'light';
 }
@@ -21,30 +26,32 @@
 
-export default createUseStyles(
-  {
-    themeIcon: ({ theme, color, size, radius, variant }: ThemeIconStylesProps) => {
-      const iconSize = getSizeValue({ size, sizes });
+export default createMemoStyles({
+  light: ({ theme, color }: ThemeIconStylesProps) => ({
+    color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 9 }),
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 9 : 1 }),
+      theme.colorScheme === 'dark' ? 0.3 : 1
+    ),
+  }),
 
-      return {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        boxSizing: 'border-box',
-        backgroundColor: getThemeColor({
-          theme,
-          color,
-          shade: variant === 'filled' ? (theme.colorScheme === 'dark' ? 4 : 6) : 1,
-        }),
-        color:
-          variant === 'filled'
-            ? theme.colorScheme === 'dark'
-              ? theme.colors.dark[9]
-              : theme.white
-            : getThemeColor({ theme, color, shade: 9 }),
-        width: iconSize,
-        height: iconSize,
-        borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
-      };
-    },
+  filled: ({ theme, color }: ThemeIconStylesProps) => ({
+    color: theme.colorScheme === 'dark' ? getThemeColor({ theme, color, shade: 0 }) : theme.white,
+    backgroundColor: hexToRgba(
+      getThemeColor({ theme, color, shade: 7 }),
+      theme.colorScheme === 'dark' ? 0.45 : 1
+    ),
+  }),
+
+  themeIcon: ({ theme, size, radius }: ThemeIconStylesProps) => {
+    const iconSize = getSizeValue({ size, sizes });
+
+    return {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      boxSizing: 'border-box',
+      width: iconSize,
+      height: iconSize,
+      borderRadius: getSizeValue({ size: radius, sizes: theme.radius }),
+    };
   },
-  { link: true }
-);
+});

src/Title/Title.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { getFontStyles, MantineTheme } from '@mantine/theme';
+import { createMemoStyles, getFontStyles, MantineTheme } from '@mantine/theme';
 
@@ -11,21 +10,18 @@ type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-export default createUseStyles(
-  {
-    title: ({ theme, element }: TitleStylesProps) => ({
-      ...getFontStyles(theme),
-      fontFamily: theme.headings.fontFamily,
-      fontWeight: theme.headings.fontWeight,
-      fontSize: theme.headings.sizes[element].fontSize,
-      lineHeight: theme.headings.sizes[element].lineHeight,
-      margin: 0,
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+export default createMemoStyles({
+  title: ({ theme, element }: TitleStylesProps) => ({
+    ...getFontStyles(theme),
+    fontFamily: theme.headings.fontFamily,
+    fontWeight: theme.headings.fontWeight,
+    fontSize: theme.headings.sizes[element].fontSize,
+    lineHeight: theme.headings.sizes[element].lineHeight,
+    margin: 0,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
 
-      '@media (max-width: 755px)': {
-        fontSize:
-          typeof theme.headings.sizes[element].fontSize === 'number' &&
-          (theme.headings.sizes[element].fontSize as number) / 1.3,
-      },
-    }),
-  },
-  { link: true }
-);
+    '@media (max-width: 755px)': {
+      fontSize:
+        typeof theme.headings.sizes[element].fontSize === 'number' &&
+        (theme.headings.sizes[element].fontSize as number) / 1.3,
+    },
+  }),
+});

src/Tooltip/Tooltip.styles.ts

@@ -1,3 +0,2 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getThemeColor, getFontStyles } from '@mantine/theme';
+import { createMemoStyles, MantineTheme, getThemeColor, getFontStyles } from '@mantine/theme';
 
@@ -41,148 +40,145 @@ interface TooltipStylesProps {
 
-export default createUseStyles(
-  {
-    withArrow: {},
-    center: {},
-    start: {},
-    end: {},
+export default createMemoStyles({
+  withArrow: {},
+  center: {},
+  start: {},
+  end: {},
 
-    wrapper: {
-      position: 'relative',
-      display: 'inline-block',
-    },
+  wrapper: {
+    position: 'relative',
+    display: 'inline-block',
+  },
 
-    tooltipInner: ({ theme, color }: TooltipStylesProps) => ({
-      ...getFontStyles(theme),
-      backgroundColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 9 }),
-      lineHeight: theme.lineHeight,
-      fontSize: theme.fontSizes.sm,
-      borderRadius: theme.radius.sm,
-      padding: [theme.spacing.xs / 2, theme.spacing.xs],
-      color: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white,
-      position: 'relative',
+  tooltipInner: ({ theme, color }: TooltipStylesProps) => ({
+    ...getFontStyles(theme),
+    backgroundColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 3 : 9 }),
+    lineHeight: theme.lineHeight,
+    fontSize: theme.fontSizes.sm,
+    borderRadius: theme.radius.sm,
+    padding: [theme.spacing.xs / 2, theme.spacing.xs],
+    color: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white,
+    position: 'relative',
 
-      '&$withArrow::before': {
-        display: 'block',
-        position: 'absolute',
-        content: '""',
-        width: 0,
-        height: 0,
-        borderStyle: 'solid',
-      },
-    }),
-
-    tooltip: {
-      display: 'inline-block',
+    '&$withArrow::before': {
+      display: 'block',
       position: 'absolute',
+      content: '""',
+      width: 0,
+      height: 0,
+      borderStyle: 'solid',
     },
+  }),
 
-    top: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
-      ...verticalPlacement,
-      bottom: `calc(100% + ${gutter}px)`,
+  tooltip: {
+    display: 'inline-block',
+    position: 'absolute',
+  },
 
-      '& $tooltipInner$withArrow::before': {
-        top: '100%',
-        borderWidth: `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`,
-        borderColor: `${getThemeColor({
-          theme,
-          color,
-          shade: theme.colorScheme === 'dark' ? 3 : 9,
-        })} transparent transparent transparent`,
-      },
+  top: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
+    ...verticalPlacement,
+    bottom: `calc(100% + ${gutter}px)`,
 
-      '&$center $tooltipInner$withArrow::before': {
-        left: `calc(50% - ${arrowSize}px)`,
-      },
+    '& $tooltipInner$withArrow::before': {
+      top: '100%',
+      borderWidth: `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`,
+      borderColor: `${getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 3 : 9,
+      })} transparent transparent transparent`,
+    },
 
-      '&$start $tooltipInner$withArrow::before': {
-        left: arrowSize,
-      },
+    '&$center $tooltipInner$withArrow::before': {
+      left: `calc(50% - ${arrowSize}px)`,
+    },
 
-      '&$end $tooltipInner$withArrow::before': {
-        right: arrowSize,
-      },
-    }),
+    '&$start $tooltipInner$withArrow::before': {
+      left: arrowSize,
+    },
 
-    bottom: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
-      ...verticalPlacement,
-      top: `calc(100% + ${gutter}px)`,
+    '&$end $tooltipInner$withArrow::before': {
+      right: arrowSize,
+    },
+  }),
 
-      '& $tooltipInner$withArrow::before': {
-        bottom: '100%',
-        borderWidth: `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`,
-        borderColor: `transparent transparent ${getThemeColor({
-          theme,
-          color,
-          shade: theme.colorScheme === 'dark' ? 3 : 9,
-        })} transparent`,
-      },
+  bottom: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
+    ...verticalPlacement,
+    top: `calc(100% + ${gutter}px)`,
 
-      '&$center $tooltipInner$withArrow::before': {
-        left: `calc(50% - ${arrowSize}px)`,
-      },
+    '& $tooltipInner$withArrow::before': {
+      bottom: '100%',
+      borderWidth: `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`,
+      borderColor: `transparent transparent ${getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 3 : 9,
+      })} transparent`,
+    },
 
-      '&$start $tooltipInner$withArrow::before': {
-        left: arrowSize,
-      },
+    '&$center $tooltipInner$withArrow::before': {
+      left: `calc(50% - ${arrowSize}px)`,
+    },
 
-      '&$end $tooltipInner$withArrow::before': {
-        right: arrowSize,
-      },
-    }),
+    '&$start $tooltipInner$withArrow::before': {
+      left: arrowSize,
+    },
 
-    right: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
-      ...horizontalPlacement,
-      left: `calc(100% + ${gutter}px)`,
+    '&$end $tooltipInner$withArrow::before': {
+      right: arrowSize,
+    },
+  }),
 
-      '& $tooltipInner$withArrow::before': {
-        right: '100%',
-        borderWidth: `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`,
-        borderColor: `transparent ${getThemeColor({
-          theme,
-          color,
-          shade: theme.colorScheme === 'dark' ? 3 : 9,
-        })} transparent transparent`,
-      },
+  right: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
+    ...horizontalPlacement,
+    left: `calc(100% + ${gutter}px)`,
 
-      '&$center $tooltipInner$withArrow::before': {
-        top: `calc(50% - ${arrowSize}px)`,
-      },
+    '& $tooltipInner$withArrow::before': {
+      right: '100%',
+      borderWidth: `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`,
+      borderColor: `transparent ${getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 3 : 9,
+      })} transparent transparent`,
+    },
 
-      '&$start $tooltipInner$withArrow::before': {
-        top: arrowSize,
-      },
+    '&$center $tooltipInner$withArrow::before': {
+      top: `calc(50% - ${arrowSize}px)`,
+    },
 
-      '&$end $tooltipInner$withArrow::before': {
-        bottom: arrowSize,
-      },
-    }),
+    '&$start $tooltipInner$withArrow::before': {
+      top: arrowSize,
+    },
 
-    left: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
-      ...horizontalPlacement,
-      right: `calc(100% + ${gutter}px)`,
+    '&$end $tooltipInner$withArrow::before': {
+      bottom: arrowSize,
+    },
+  }),
 
-      '& $tooltipInner$withArrow::before': {
-        left: '100%',
-        borderWidth: `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`,
-        borderColor: `transparent transparent transparent ${getThemeColor({
-          theme,
-          color,
-          shade: theme.colorScheme === 'dark' ? 3 : 9,
-        })}`,
-      },
+  left: ({ gutter, theme, color, arrowSize }: TooltipStylesProps) => ({
+    ...horizontalPlacement,
+    right: `calc(100% + ${gutter}px)`,
 
-      '&$center $tooltipInner$withArrow::before': {
-        top: `calc(50% - ${arrowSize}px)`,
-      },
+    '& $tooltipInner$withArrow::before': {
+      left: '100%',
+      borderWidth: `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`,
+      borderColor: `transparent transparent transparent ${getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 3 : 9,
+      })}`,
+    },
 
-      '&$start $tooltipInner$withArrow::before': {
-        top: arrowSize,
-      },
+    '&$center $tooltipInner$withArrow::before': {
+      top: `calc(50% - ${arrowSize}px)`,
+    },
 
-      '&$end $tooltipInner$withArrow::before': {
-        bottom: arrowSize,
-      },
-    }),
-  },
-  { link: true }
-);
+    '&$start $tooltipInner$withArrow::before': {
+      top: arrowSize,
+    },
+
+    '&$end $tooltipInner$withArrow::before': {
+      bottom: arrowSize,
+    },
+  }),
+});

src/TypographyStylesProvider/TypographyStylesProvider.styles.ts

@@ -1,3 +0,8 @@
-import { createUseStyles } from 'react-jss';
-import { MantineTheme, getFontStyles, getThemeColor, getFocusStyles } from '@mantine/theme';
+import {
+  createMemoStyles,
+  MantineTheme,
+  getFontStyles,
+  getThemeColor,
+  getFocusStyles,
+} from '@mantine/theme';
 
@@ -8,173 +13,169 @@ interface InnerHtmlStylesProps {
 
-export default createUseStyles(
-  {
-    innerHtml: ({ theme }: InnerHtmlStylesProps) => {
-      const headings = Object.keys(theme.headings.sizes).reduce((acc, h) => {
-        acc[`& ${h}`] = {
-          fontFamily: theme.headings.fontFamily,
-          fontWeight: theme.headings.fontWeight,
-          marginTop: theme.spacing.lg * theme.headings.sizes[h].lineHeight,
-          marginBottom: theme.spacing.xs * theme.headings.sizes[h].lineHeight,
-          ...theme.headings.sizes[h],
+export default createMemoStyles({
+  innerHtml: ({ theme }: InnerHtmlStylesProps) => {
+    const headings = Object.keys(theme.headings.sizes).reduce((acc, h) => {
+      acc[`& ${h}`] = {
+        fontFamily: theme.headings.fontFamily,
+        fontWeight: theme.headings.fontWeight,
+        marginTop: theme.spacing.lg * theme.headings.sizes[h].lineHeight,
+        marginBottom: theme.spacing.xs * theme.headings.sizes[h].lineHeight,
+        ...theme.headings.sizes[h],
 
-          '@media (max-width: 755px)': {
-            fontSize:
-              typeof theme.headings.sizes[h].fontSize === 'number' &&
-              (theme.headings.sizes[h].fontSize as number) / 1.3,
-          },
-        };
+        '@media (max-width: 755px)': {
+          fontSize:
+            typeof theme.headings.sizes[h].fontSize === 'number' &&
+            (theme.headings.sizes[h].fontSize as number) / 1.3,
+        },
+      };
 
-        return acc;
-      }, {});
+      return acc;
+    }, {});
 
-      return {
-        ...getFontStyles(theme),
-        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-        lineHeight: theme.lineHeight,
-        fontSize: theme.fontSizes.md,
+    return {
+      ...getFontStyles(theme),
+      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+      lineHeight: theme.lineHeight,
+      fontSize: theme.fontSizes.md,
 
-        '@media (max-width: 755px)': {
-          fontSize: theme.fontSizes.sm,
-        },
+      '@media (max-width: 755px)': {
+        fontSize: theme.fontSizes.sm,
+      },
 
-        ...headings,
+      ...headings,
 
-        '& img': {
-          maxWidth: '100%',
-          marginBottom: theme.spacing.xs,
-        },
+      '& img': {
+        maxWidth: '100%',
+        marginBottom: theme.spacing.xs,
+      },
 
-        '& p': {
-          marginTop: 0,
-          marginBottom: theme.spacing.sm,
-        },
+      '& p': {
+        marginTop: 0,
+        marginBottom: theme.spacing.sm,
+      },
 
-        '& hr': {
-          marginTop: theme.spacing.md,
-          marginBottom: theme.spacing.sm,
-          borderBottom: 0,
-          borderLeft: 0,
-          borderRight: 0,
-          borderTop: `1px dashed ${theme.colors.gray[theme.colorScheme === 'dark' ? 4 : 6]}`,
-        },
+      '& hr': {
+        marginTop: theme.spacing.md,
+        marginBottom: theme.spacing.sm,
+        borderBottom: 0,
+        borderLeft: 0,
+        borderRight: 0,
+        borderTop: `1px dashed ${theme.colors.gray[theme.colorScheme === 'dark' ? 4 : 6]}`,
+      },
 
-        '& a': {
-          ...getFocusStyles(theme),
-          color: theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6],
-          textDecoration: 'none',
+      '& a': {
+        ...getFocusStyles(theme),
+        color: theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6],
+        textDecoration: 'none',
 
-          '&:hover': {
-            textDecoration: 'underline',
-          },
+        '&:hover': {
+          textDecoration: 'underline',
         },
+      },
 
-        '& pre': {
-          padding: theme.spacing.xs,
-          lineHeight: theme.lineHeight,
-          margin: 0,
-          marginTop: theme.spacing.md,
-          marginBottom: theme.spacing.md,
-          overflowX: 'auto',
-          fontFamily: theme.fontFamilyMonospace,
-          backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[0],
-        },
+      '& pre': {
+        padding: theme.spacing.xs,
+        lineHeight: theme.lineHeight,
+        margin: 0,
+        marginTop: theme.spacing.md,
+        marginBottom: theme.spacing.md,
+        overflowX: 'auto',
+        fontFamily: theme.fontFamilyMonospace,
+        fontSize: theme.fontSizes.sm,
+        borderRadius: theme.radius.sm,
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
+      },
 
-        '& code': {
-          lineHeight: theme.lineHeight,
-          padding: [1, theme.spacing.xs / 2],
-          borderRadius: theme.radius.sm,
-          color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-          backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[0],
-          fontFamily: theme.fontFamilyMonospace,
-          fontSize: theme.fontSizes.xs,
-          border: `1px solid ${
-            theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[3]
-          }`,
-        },
+      '& code': {
+        lineHeight: theme.lineHeight,
+        padding: [1, theme.spacing.xs / 2],
+        borderRadius: theme.radius.sm,
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[0],
+        fontFamily: theme.fontFamilyMonospace,
+        fontSize: theme.fontSizes.xs,
+        border: `1px solid ${
+          theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[3]
+        }`,
+      },
 
-        '& ul, & ol': {
-          marginBottom: theme.spacing.md,
-          paddingLeft: theme.spacing.lg * 2,
+      '& ul, & ol': {
+        marginBottom: theme.spacing.md,
+        paddingLeft: theme.spacing.lg * 2,
 
-          '& li': {
-            marginTop: theme.spacing.xs,
-          },
+        '& li': {
+          marginTop: theme.spacing.xs,
         },
+      },
 
-        '& table': {
-          width: '100%',
-          borderCollapse: 'collapse',
-          captionSide: 'bottom',
-          marginBottom: theme.spacing.md,
+      '& table': {
+        width: '100%',
+        borderCollapse: 'collapse',
+        captionSide: 'bottom',
+        marginBottom: theme.spacing.md,
 
-          '& caption': {
-            marginTop: theme.spacing.xs,
-            fontSize: theme.fontSizes.sm,
-            color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-          },
+        '& caption': {
+          marginTop: theme.spacing.xs,
+          fontSize: theme.fontSizes.sm,
+          color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+        },
 
-          '& th': {
-            textAlign: 'left',
-            fontWeight: 'bold',
-            color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
-            fontSize: 14,
-            padding: [7, 10],
-          },
+        '& th': {
+          textAlign: 'left',
+          fontWeight: 'bold',
+          color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+          fontSize: 14,
+          padding: [7, 10],
+        },
 
-          '& thead th': {
-            borderBottom: `1px solid ${
-              theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
-            }`,
-          },
+        '& thead th': {
+          borderBottom: `1px solid ${
+            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
+          }`,
+        },
 
-          '& tfoot th': {
-            borderTop: `1px solid ${
-              theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
-            }`,
-          },
+        '& tfoot th': {
+          borderTop: `1px solid ${
+            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
+          }`,
+        },
 
-          '& td': {
-            padding: [7, 10],
-            borderBottom: `1px solid ${
-              theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
-            }`,
-            fontSize: 14,
-          },
+        '& td': {
+          padding: [7, 10],
+          borderBottom: `1px solid ${
+            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
+          }`,
+          fontSize: 14,
+        },
 
-          '& tr:last-of-type td': {
-            borderBottom: 'none',
-          },
+        '& tr:last-of-type td': {
+          borderBottom: 'none',
         },
+      },
 
-        '& blockquote': {
-          fontSize: theme.fontSizes.lg,
-          lineHeight: theme.lineHeight,
-          margin: [theme.spacing.md, 0],
-          borderTopRightRadius: theme.radius.sm,
-          borderBottomRightRadius: theme.radius.sm,
-          padding: [theme.spacing.md, theme.spacing.lg],
-          backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.colors.gray[0],
-          color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-          borderLeft: `3px solid ${getThemeColor({
-            theme,
-            color: theme.primaryColor,
-            shade: theme.colorScheme === 'dark' ? 4 : 6,
-          })}`,
+      '& blockquote': {
+        fontSize: theme.fontSizes.lg,
+        lineHeight: theme.lineHeight,
+        margin: [theme.spacing.md, 0],
+        borderTopRightRadius: theme.radius.sm,
+        borderBottomRightRadius: theme.radius.sm,
+        padding: [theme.spacing.md, theme.spacing.lg],
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
+        borderLeft: `3px solid ${getThemeColor({
+          theme,
+          color: theme.primaryColor,
+          shade: theme.colorScheme === 'dark' ? 4 : 6,
+        })}`,
 
-          '& cite': {
-            display: 'block',
-            fontSize: theme.fontSizes.sm,
-            marginTop: theme.spacing.xs,
-            color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          },
+        '& cite': {
+          display: 'block',
+          fontSize: theme.fontSizes.sm,
+          marginTop: theme.spacing.xs,
+          color: theme.colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
         },
-      };
-    },
+      },
+    };
   },
-  { link: true }
-);
+});

No alert changes

Improved metrics

Total package byte prevSize

1616155

increased by10.81%

Number of package files

799

increased by6.82%

Lines of code

16960

increased by9.67%

No dependency changes