@coveord/plasma-mantine 53.1.4 → 54.0.0

package/dist/esm/theme/Theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {\n    ArrowHeadLeftSize16Px,\n    ArrowHeadRightSize16Px,\n    CheckSize16Px,\n    CrossSize16Px,\n    FilterSize16Px,\n    InfoSize16Px,\n    InfoSize24Px,\n} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {\n    ActionIcon,\n    Alert,\n    Anchor,\n    AppShellNavbar,\n    Badge,\n    Button,\n    Checkbox,\n    CloseButton,\n    ColorSwatch,\n    Combobox,\n    ComboboxSearch,\n    Divider,\n    Input,\n    InputWrapper,\n    List,\n    Loader,\n    MantineThemeOverride,\n    MenuItem,\n    Modal,\n    MultiSelect,\n    NavLink,\n    Notification,\n    Pagination,\n    Popover,\n    Radio,\n    ScrollArea,\n    SegmentedControl,\n    Select,\n    Skeleton,\n    Stepper,\n    Tabs,\n    Text,\n    TextInput,\n    Title,\n    Tooltip,\n    createTheme,\n} from '@mantine/core';\nimport {DatePicker} from '@mantine/dates';\nimport ActionIconClasses from '../styles/ActionIcon.module.css';\nimport AlertClasses from '../styles/Alert.module.css';\nimport AnchorClasses from '../styles/Anchor.module.css';\nimport AppShellNavBarClasses from '../styles/AppShellNavBar.module.css';\nimport BadgeClasses from '../styles/Badge.module.css';\nimport ButtonClasses from '../styles/Button.module.css';\nimport CheckboxClasses from '../styles/Checkbox.module.css';\nimport ComboboxClasses from '../styles/Combobox.module.css';\nimport DatePickerClasses from '../styles/DatePicker.module.css';\nimport InputClasses from '../styles/Input.module.css';\nimport InputWrapperClasses from '../styles/InputWrapper.module.css';\nimport ListClasses from '../styles/List.module.css';\nimport ModalClasses from '../styles/Modal.module.css';\nimport NavLinkClasses from '../styles/NavLink.module.css';\nimport NotificationClasses from '../styles/Notification.module.css';\nimport PaginationClasses from '../styles/Pagination.module.css';\nimport RadioClasses from '../styles/Radio.module.css';\nimport ScrollAreaClasses from '../styles/ScrollArea.module.css';\nimport SegmentedControlClasses from '../styles/SegmentedControl.module.css';\nimport SelectClasses from '../styles/Select.module.css';\nimport SkeletonClasses from '../styles/Skeleton.module.css';\nimport StepperClasses from '../styles/Stepper.module.css';\nimport TabsClasses from '../styles/Tabs.module.css';\nimport TextClasses from '../styles/Text.module.css';\nimport TitleClasses from '../styles/Title.module.css';\nimport {NotificationVars} from '../vars/Notification.vars';\nimport {TextVars} from '../vars/Text.vars';\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = createTheme({\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-theme.ts\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    lineHeights: {md: '1.5'},\n    fontSmoothing: false,\n    spacing: {\n        xs: '8px',\n        sm: '16px',\n        md: '24px',\n        lg: '32px',\n        xl: '40px',\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: '500',\n        sizes: {\n            h1: {fontSize: '48px', lineHeight: '1.5', fontWeight: '300'},\n            h2: {fontSize: '32px', lineHeight: '1.5', fontWeight: '500'},\n            h3: {fontSize: '24px', lineHeight: '1.5', fontWeight: '500'},\n            h4: {fontSize: '18px', lineHeight: '1.5', fontWeight: '300'},\n            h5: {fontSize: '14px', lineHeight: '1.5', fontWeight: '500'},\n            h6: {fontSize: '12px', lineHeight: '1.5', fontWeight: '500'},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        ActionIcon: ActionIcon.extend({\n            classNames: {root: ActionIconClasses.root},\n        }),\n        Alert: Alert.extend({\n            defaultProps: {\n                icon: <InfoSize16Px height={16} />,\n                color: 'navy',\n            },\n            classNames: AlertClasses,\n        }),\n        Anchor: Anchor.extend({\n            defaultProps: {\n                color: 'action.6',\n            },\n            classNames: {root: AnchorClasses.root},\n        }),\n        AppShellNavbar: AppShellNavbar.extend({\n            classNames: {navbar: AppShellNavBarClasses.navbar},\n        }),\n        Badge: Badge.extend({\n            classNames: {root: BadgeClasses.root},\n            defaultProps: {\n                variant: 'light',\n            },\n        }),\n        Button: Button.extend({\n            classNames: ButtonClasses,\n        }),\n        Checkbox: Checkbox.extend({\n            defaultProps: {\n                radius: 'sm',\n            },\n            classNames: {label: CheckboxClasses.label, input: CheckboxClasses.input},\n        }),\n        CloseButton: CloseButton.extend({\n            defaultProps: {\n                icon: <CrossSize16Px height={16} aria-label=\"close\" />,\n            },\n        }),\n        ColorSwatch: ColorSwatch.extend({\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        }),\n        Combobox: Combobox.extend({\n            classNames: {option: SelectClasses.option, search: ComboboxClasses.search},\n        }),\n        ComboboxSearch: ComboboxSearch.extend({\n            defaultProps: {\n                placeholder: 'Search',\n                rightSection: <FilterSize16Px height={16} color=\"gray.5\" />,\n            },\n        }),\n        DatePicker: DatePicker.extend({\n            classNames: {monthCell: DatePickerClasses.monthCell},\n        }),\n        Divider: Divider.extend({\n            defaultProps: {\n                color: 'gray.3',\n            },\n        }),\n        Input: Input.extend({\n            classNames: InputClasses,\n        }),\n        InputWrapper: InputWrapper.extend({\n            classNames: InputWrapperClasses,\n        }),\n        Loader: Loader.extend({\n            defaultProps: {\n                type: 'dots',\n                color: 'action',\n                role: 'presentation',\n            },\n        }),\n        List: List.extend({\n            classNames: {root: ListClasses.root},\n        }),\n        MenuItem: MenuItem.extend({\n            defaultProps: {\n                fw: 300,\n            },\n        }),\n        Modal: Modal.extend({\n            classNames: ModalClasses,\n        }),\n        ModalOverlay: Modal.Overlay.extend({\n            defaultProps: {\n                color: color.primary.navy[9],\n                backgroundOpacity: 0.9,\n            },\n        }),\n        ModalRoot: Modal.Root.extend({\n            defaultProps: {\n                padding: 'lg',\n            },\n        }),\n        MultiSelect: MultiSelect.extend({defaultProps: {hidePickedOptions: true}}),\n        NavLink: NavLink.extend({classNames: NavLinkClasses}),\n        Notification: Notification.extend({\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'info',\n            },\n            classNames: {\n                root: NotificationClasses.root,\n                icon: NotificationClasses.icon,\n                closeButton: NotificationClasses.closeButton,\n            },\n            vars: NotificationVars,\n        }),\n        Pagination: Pagination.extend({\n            classNames: PaginationClasses,\n            vars: () => ({root: {'--pagination-control-fz': 'var(--mantine-font-size-sm)'}}),\n            defaultProps: {\n                nextIcon: ArrowHeadRightSize16Px,\n                previousIcon: ArrowHeadLeftSize16Px,\n            },\n        }),\n        Popover: Popover.extend({\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        }),\n        Radio: Radio.extend({\n            classNames: {labelWrapper: RadioClasses.labelWrapper},\n        }),\n        ScrollArea: ScrollArea.extend({\n            classNames: {viewport: ScrollAreaClasses.viewport},\n        }),\n        SegmentedControl: SegmentedControl.extend({\n            classNames: SegmentedControlClasses,\n        }),\n        Select: Select.extend({\n            defaultProps: {withCheckIcon: false, allowDeselect: false},\n            classNames: {input: SelectClasses.input, option: SelectClasses.option},\n        }),\n        Skeleton: Skeleton.extend({\n            classNames: {root: SkeletonClasses.root},\n        }),\n        Stepper: Stepper.extend({\n            defaultProps: {\n                size: 'xs',\n                completedIcon: <CheckSize16Px />,\n            },\n            classNames: {\n                step: StepperClasses.step,\n                stepIcon: StepperClasses.stepIcon,\n                stepCompletedIcon: StepperClasses.stepCompletedIcon,\n                stepDescription: StepperClasses.stepDescription,\n                separator: StepperClasses.separator,\n                verticalSeparator: StepperClasses.verticalSeparator,\n            },\n        }),\n        Tabs: Tabs.extend({\n            classNames: {list: TabsClasses.list, tab: TabsClasses.tab},\n        }),\n        Text: Text.extend({\n            classNames: TextClasses,\n            vars: TextVars,\n        }),\n        TextInput: TextInput.extend({\n            defaultProps: {\n                radius: 8,\n            },\n        }),\n        Title: Title.extend({\n            classNames: {root: TitleClasses.root},\n        }),\n        Tooltip: Tooltip.extend({\n            defaultProps: {\n                color: 'navy',\n                maw: 300,\n                multiline: true,\n                withArrow: true,\n                zIndex: 10000,\n            },\n        }),\n    },\n});\n"],"names":["ArrowHeadLeftSize16Px","ArrowHeadRightSize16Px","CheckSize16Px","CrossSize16Px","FilterSize16Px","InfoSize16Px","InfoSize24Px","color","ActionIcon","Alert","Anchor","AppShellNavbar","Badge","Button","Checkbox","CloseButton","ColorSwatch","Combobox","ComboboxSearch","Divider","Input","InputWrapper","List","Loader","MenuItem","Modal","MultiSelect","NavLink","Notification","Pagination","Popover","Radio","ScrollArea","SegmentedControl","Select","Skeleton","Stepper","Tabs","Text","TextInput","Title","Tooltip","createTheme","DatePicker","ActionIconClasses","AlertClasses","AnchorClasses","AppShellNavBarClasses","BadgeClasses","ButtonClasses","CheckboxClasses","ComboboxClasses","DatePickerClasses","InputClasses","InputWrapperClasses","ListClasses","ModalClasses","NavLinkClasses","NotificationClasses","PaginationClasses","RadioClasses","ScrollAreaClasses","SegmentedControlClasses","SelectClasses","SkeletonClasses","StepperClasses","TabsClasses","TextClasses","TitleClasses","NotificationVars","TextVars","PlasmaColors","plasmaTheme","fontFamily","black","primary","gray","defaultRadius","lineHeights","md","fontSmoothing","spacing","xs","sm","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","h2","h3","h4","h5","h6","shadows","colors","components","extend","classNames","root","defaultProps","icon","height","navbar","variant","radius","label","input","aria-label","size","withShadow","option","search","placeholder","rightSection","monthCell","type","role","fw","ModalOverlay","Overlay","navy","backgroundOpacity","ModalRoot","Root","padding","hidePickedOptions","closeButton","vars","nextIcon","previousIcon","shadow","withArrow","labelWrapper","viewport","withCheckIcon","allowDeselect","completedIcon","step","stepIcon","stepCompletedIcon","stepDescription","separator","verticalSeparator","list","tab","maw","multiline","zIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {\n    ArrowHeadLeftSize16Px,\n    ArrowHeadRightSize16Px,\n    CheckSize16Px,\n    CrossSize16Px,\n    FilterSize16Px,\n    InfoSize16Px,\n    InfoSize24Px,\n} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {\n    ActionIcon,\n    Alert,\n    Anchor,\n    AppShellNavbar,\n    Badge,\n    Button,\n    Checkbox,\n    CloseButton,\n    ColorSwatch,\n    Combobox,\n    ComboboxSearch,\n    Divider,\n    Input,\n    InputWrapper,\n    List,\n    Loader,\n    MantineThemeOverride,\n    MenuItem,\n    Modal,\n    MultiSelect,\n    NavLink,\n    Notification,\n    Pagination,\n    Popover,\n    Radio,\n    ScrollArea,\n    SegmentedControl,\n    Select,\n    Skeleton,\n    Stepper,\n    Tabs,\n    Text,\n    TextInput,\n    Title,\n    Tooltip,\n    createTheme,\n} from '@mantine/core';\nimport {DatePicker} from '@mantine/dates';\nimport ActionIconClasses from '../styles/ActionIcon.module.css';\nimport AlertClasses from '../styles/Alert.module.css';\nimport AnchorClasses from '../styles/Anchor.module.css';\nimport AppShellNavBarClasses from '../styles/AppShellNavBar.module.css';\nimport BadgeClasses from '../styles/Badge.module.css';\nimport ButtonClasses from '../styles/Button.module.css';\nimport CheckboxClasses from '../styles/Checkbox.module.css';\nimport ComboboxClasses from '../styles/Combobox.module.css';\nimport DatePickerClasses from '../styles/DatePicker.module.css';\nimport InputClasses from '../styles/Input.module.css';\nimport InputWrapperClasses from '../styles/InputWrapper.module.css';\nimport ListClasses from '../styles/List.module.css';\nimport ModalClasses from '../styles/Modal.module.css';\nimport NavLinkClasses from '../styles/NavLink.module.css';\nimport NotificationClasses from '../styles/Notification.module.css';\nimport PaginationClasses from '../styles/Pagination.module.css';\nimport RadioClasses from '../styles/Radio.module.css';\nimport ScrollAreaClasses from '../styles/ScrollArea.module.css';\nimport SegmentedControlClasses from '../styles/SegmentedControl.module.css';\nimport SelectClasses from '../styles/Select.module.css';\nimport SkeletonClasses from '../styles/Skeleton.module.css';\nimport StepperClasses from '../styles/Stepper.module.css';\nimport TabsClasses from '../styles/Tabs.module.css';\nimport TextClasses from '../styles/Text.module.css';\nimport TitleClasses from '../styles/Title.module.css';\nimport {NotificationVars} from '../vars/Notification.vars';\nimport {TextVars} from '../vars/Text.vars';\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = createTheme({\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/default-theme.ts\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    lineHeights: {md: '1.5'},\n    spacing: {\n        xs: '8px',\n        sm: '16px',\n        md: '24px',\n        lg: '32px',\n        xl: '40px',\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: '500',\n        sizes: {\n            h1: {fontSize: '48px', lineHeight: '1.5', fontWeight: '300'},\n            h2: {fontSize: '32px', lineHeight: '1.5', fontWeight: '500'},\n            h3: {fontSize: '24px', lineHeight: '1.5', fontWeight: '500'},\n            h4: {fontSize: '18px', lineHeight: '1.5', fontWeight: '300'},\n            h5: {fontSize: '14px', lineHeight: '1.5', fontWeight: '500'},\n            h6: {fontSize: '12px', lineHeight: '1.5', fontWeight: '500'},\n        },\n    },\n    shadows: {\n        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n    },\n    colors: PlasmaColors,\n    components: {\n        ActionIcon: ActionIcon.extend({\n            classNames: {root: ActionIconClasses.root},\n        }),\n        Alert: Alert.extend({\n            defaultProps: {\n                icon: <InfoSize16Px height={16} />,\n                color: 'navy',\n            },\n            classNames: AlertClasses,\n        }),\n        Anchor: Anchor.extend({\n            defaultProps: {\n                color: 'action.6',\n            },\n            classNames: {root: AnchorClasses.root},\n        }),\n        AppShellNavbar: AppShellNavbar.extend({\n            classNames: {navbar: AppShellNavBarClasses.navbar},\n        }),\n        Badge: Badge.extend({\n            classNames: {root: BadgeClasses.root},\n            defaultProps: {\n                variant: 'light',\n            },\n        }),\n        Button: Button.extend({\n            classNames: ButtonClasses,\n        }),\n        Checkbox: Checkbox.extend({\n            defaultProps: {\n                radius: 'sm',\n            },\n            classNames: {label: CheckboxClasses.label, input: CheckboxClasses.input},\n        }),\n        CloseButton: CloseButton.extend({\n            defaultProps: {\n                icon: <CrossSize16Px height={16} aria-label=\"close\" />,\n            },\n        }),\n        ColorSwatch: ColorSwatch.extend({\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        }),\n        Combobox: Combobox.extend({\n            classNames: {option: SelectClasses.option, search: ComboboxClasses.search},\n        }),\n        ComboboxSearch: ComboboxSearch.extend({\n            defaultProps: {\n                placeholder: 'Search',\n                rightSection: <FilterSize16Px height={16} color=\"gray.5\" />,\n            },\n        }),\n        DatePicker: DatePicker.extend({\n            classNames: {monthCell: DatePickerClasses.monthCell},\n        }),\n        Divider: Divider.extend({\n            defaultProps: {\n                color: 'gray.3',\n            },\n        }),\n        Input: Input.extend({\n            classNames: InputClasses,\n        }),\n        InputWrapper: InputWrapper.extend({\n            classNames: InputWrapperClasses,\n        }),\n        Loader: Loader.extend({\n            defaultProps: {\n                type: 'dots',\n                color: 'action',\n                role: 'presentation',\n            },\n        }),\n        List: List.extend({\n            classNames: {root: ListClasses.root},\n        }),\n        MenuItem: MenuItem.extend({\n            defaultProps: {\n                fw: 300,\n            },\n        }),\n        Modal: Modal.extend({\n            classNames: ModalClasses,\n        }),\n        ModalOverlay: Modal.Overlay.extend({\n            defaultProps: {\n                color: color.primary.navy[9],\n                backgroundOpacity: 0.9,\n            },\n        }),\n        ModalRoot: Modal.Root.extend({\n            defaultProps: {\n                padding: 'lg',\n            },\n        }),\n        MultiSelect: MultiSelect.extend({defaultProps: {hidePickedOptions: true}}),\n        NavLink: NavLink.extend({classNames: NavLinkClasses}),\n        Notification: Notification.extend({\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'info',\n            },\n            classNames: {\n                root: NotificationClasses.root,\n                icon: NotificationClasses.icon,\n                closeButton: NotificationClasses.closeButton,\n            },\n            vars: NotificationVars,\n        }),\n        Pagination: Pagination.extend({\n            classNames: PaginationClasses,\n            vars: () => ({root: {'--pagination-control-fz': 'var(--mantine-font-size-sm)'}}),\n            defaultProps: {\n                nextIcon: ArrowHeadRightSize16Px,\n                previousIcon: ArrowHeadLeftSize16Px,\n            },\n        }),\n        Popover: Popover.extend({\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        }),\n        Radio: Radio.extend({\n            classNames: {labelWrapper: RadioClasses.labelWrapper},\n        }),\n        ScrollArea: ScrollArea.extend({\n            classNames: {viewport: ScrollAreaClasses.viewport},\n        }),\n        SegmentedControl: SegmentedControl.extend({\n            classNames: SegmentedControlClasses,\n        }),\n        Select: Select.extend({\n            defaultProps: {withCheckIcon: false, allowDeselect: false},\n            classNames: {input: SelectClasses.input, option: SelectClasses.option},\n        }),\n        Skeleton: Skeleton.extend({\n            classNames: {root: SkeletonClasses.root},\n        }),\n        Stepper: Stepper.extend({\n            defaultProps: {\n                size: 'xs',\n                completedIcon: <CheckSize16Px />,\n            },\n            classNames: {\n                step: StepperClasses.step,\n                stepIcon: StepperClasses.stepIcon,\n                stepCompletedIcon: StepperClasses.stepCompletedIcon,\n                stepDescription: StepperClasses.stepDescription,\n                separator: StepperClasses.separator,\n                verticalSeparator: StepperClasses.verticalSeparator,\n            },\n        }),\n        Tabs: Tabs.extend({\n            classNames: {list: TabsClasses.list, tab: TabsClasses.tab},\n        }),\n        Text: Text.extend({\n            classNames: TextClasses,\n            vars: TextVars,\n        }),\n        TextInput: TextInput.extend({\n            defaultProps: {\n                radius: 8,\n            },\n        }),\n        Title: Title.extend({\n            classNames: {root: TitleClasses.root},\n        }),\n        Tooltip: Tooltip.extend({\n            defaultProps: {\n                color: 'navy',\n                maw: 300,\n                multiline: true,\n                withArrow: true,\n                zIndex: 10000,\n            },\n        }),\n    },\n});\n"],"names":["ArrowHeadLeftSize16Px","ArrowHeadRightSize16Px","CheckSize16Px","CrossSize16Px","FilterSize16Px","InfoSize16Px","InfoSize24Px","color","ActionIcon","Alert","Anchor","AppShellNavbar","Badge","Button","Checkbox","CloseButton","ColorSwatch","Combobox","ComboboxSearch","Divider","Input","InputWrapper","List","Loader","MenuItem","Modal","MultiSelect","NavLink","Notification","Pagination","Popover","Radio","ScrollArea","SegmentedControl","Select","Skeleton","Stepper","Tabs","Text","TextInput","Title","Tooltip","createTheme","DatePicker","ActionIconClasses","AlertClasses","AnchorClasses","AppShellNavBarClasses","BadgeClasses","ButtonClasses","CheckboxClasses","ComboboxClasses","DatePickerClasses","InputClasses","InputWrapperClasses","ListClasses","ModalClasses","NavLinkClasses","NotificationClasses","PaginationClasses","RadioClasses","ScrollAreaClasses","SegmentedControlClasses","SelectClasses","SkeletonClasses","StepperClasses","TabsClasses","TextClasses","TitleClasses","NotificationVars","TextVars","PlasmaColors","plasmaTheme","fontFamily","black","primary","gray","defaultRadius","lineHeights","md","spacing","xs","sm","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","h2","h3","h4","h5","h6","shadows","colors","components","extend","classNames","root","defaultProps","icon","height","navbar","variant","radius","label","input","aria-label","size","withShadow","option","search","placeholder","rightSection","monthCell","type","role","fw","ModalOverlay","Overlay","navy","backgroundOpacity","ModalRoot","Root","padding","hidePickedOptions","closeButton","vars","nextIcon","previousIcon","shadow","withArrow","labelWrapper","viewport","withCheckIcon","allowDeselect","completedIcon","step","stepIcon","stepCompletedIcon","stepDescription","separator","verticalSeparator","list","tab","maw","multiline","zIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "53.1.4",
+  "version": "54.0.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -34,19 +34,18 @@
     "@mantine/utils": "6.0.21",
     "@monaco-editor/react": "4.6.0",
     "@swc/helpers": "0.5.6",
-    "@tanstack/react-table": "8.15.0",
-    "@tanstack/table-core": "8.14.0",
+    "@tanstack/react-table": "8.16.0",
+    "@tanstack/table-core": "8.16.0",
     "clsx": "2.0.0",
     "dayjs": "1.11.10",
     "fast-deep-equal": "3.1.3",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.46.0",
-    "@coveord/plasma-react-icons": "53.1.2",
-    "@coveord/plasma-tokens": "53.1.1"
+    "@coveord/plasma-react-icons": "54.0.0",
+    "@coveord/plasma-tokens": "54.0.0"
   },
   "devDependencies": {
-    "@emotion/react": "11.11.3",
     "@mantine/carousel": "7.6.1",
     "@mantine/code-highlight": "7.6.1",
     "@mantine/core": "7.6.1",
@@ -57,41 +56,33 @@
     "@mantine/notifications": "7.6.1",
     "@swc/cli": "0.3.12",
     "@swc/core": "1.5.0",
-    "@swc/jest": "0.2.29",
     "@testing-library/jest-dom": "6.4.2",
-    "@testing-library/react": "14.2.1",
+    "@testing-library/react": "15.0.5",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.12",
-    "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.debounce": "4.0.7",
     "@types/lodash.defaultsdeep": "4.6.9",
-    "@types/react": "18.2.60",
-    "@types/react-dom": "18.2.19",
-    "@types/testing-library__jest-dom": "5.14.9",
-    "csstype": "3.1.3",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
     "embla-carousel-react": "7.1.0",
     "eslint-plugin-testing-library": "6.2.0",
     "eslint-plugin-vitest": "0.3.22",
     "eslint-plugin-vitest-globals": "1.4.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-junit": "16.0.0",
-    "npm-run-all2": "5.0.0",
+    "jsdom": "24.0.0",
     "postcss": "8.4.32",
     "postcss-preset-mantine": "^1.11.0",
     "postcss-simple-vars": "^7.0.1",
     "publint": "0.2.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "rimraf": "5.0.5",
     "sass": "1.66.1",
     "tslib": "2.6.2",
     "typescript": "5.3.3",
     "vitest": "1.3.1",
-    "eslint-config-plasma": "53.1.1"
+    "eslint-config-plasma": "54.0.0"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.10.0",
     "@mantine/carousel": "^7.6.1",
     "@mantine/code-highlight": "^7.6.1",
     "@mantine/core": "^7.6.1",
@@ -104,6 +95,29 @@
     "react": ">= 18.0.0",
     "react-dom": ">= 18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@mantine/carousel": {
+      "optional": true
+    },
+    "@mantine/code-highlight": {
+      "optional": true
+    },
+    "@mantine/dates": {
+      "optional": true
+    },
+    "@mantine/form": {
+      "optional": true
+    },
+    "@mantine/modals": {
+      "optional": true
+    },
+    "@mantine/notifications": {
+      "optional": true
+    },
+    "embla-carousel-react": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "node ../../scripts/build",
     "clean": "rimraf dist",

package/src/__tests__/Utils.tsx

@@ -5,7 +5,9 @@ import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';
 import {Plasmantine} from '../theme';
 
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult => {
-    const TestWrapper: FunctionComponent<PropsWithChildren> = ({children}) => <Plasmantine>{children}</Plasmantine>;
+    const TestWrapper: FunctionComponent<PropsWithChildren> = ({children}) => (
+        <Plasmantine withCssVariables={false}>{children}</Plasmantine>
+    );
 
     return render(ui, {wrapper: TestWrapper, ...options});
 };

package/src/components/button/Button.tsx

@@ -1,11 +1,13 @@
 import {
+    ButtonCssVariables,
     ButtonGroup,
+    ButtonStylesNames,
+    ButtonVariant,
     Factory,
     Button as MantineButton,
     ButtonProps as MantineButtonProps,
     polymorphicFactory,
 } from '@mantine/core';
-import {ButtonCssVariables, ButtonStylesNames, ButtonVariant} from '@mantine/core/lib/components/Button/Button';
 import {MouseEventHandler} from 'react';
 import {useClickWithLoading} from '../../hooks/useClickWithLoading';
 import {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from './ButtonWithDisabledTooltip';

package/src/components/code-editor/CodeEditor.tsx

@@ -227,13 +227,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     );
 
     return (
-        <Stack
-            justify="flex-start"
-            gap={0}
-            h={{height: Math.max(parentHeight, minHeight), maxHeight}}
-            ref={ref}
-            {...others}
-        >
+        <Stack justify="flex-start" gap={0} h={Math.max(parentHeight, minHeight)} mah={maxHeight} ref={ref} {...others}>
             {_header}
             {_buttons}
             {_editor}

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -2,11 +2,6 @@
 
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
-  <style
-    data-mantine-styles="true"
-  >
-    :root{--mantine-webkit-font-smoothing: unset;--mantine-moz-font-smoothing: unset;--mantine-color-black: #282829;--mantine-line-height: 1.5;--mantine-font-family: canada-type-gibson, sans-serif;--mantine-font-family-headings: canada-type-gibson, sans-serif;--mantine-heading-font-weight: 500;--mantine-radius-default: calc(0.5rem * var(--mantine-scale));--mantine-primary-color-filled: var(--mantine-color-action-filled);--mantine-primary-color-filled-hover: var(--mantine-color-action-filled-hover);--mantine-primary-color-light: var(--mantine-color-action-light);--mantine-primary-color-light-hover: var(--mantine-color-action-light-hover);--mantine-primary-color-light-color: var(--mantine-color-action-light-color);--mantine-spacing-xs: 8px;--mantine-spacing-sm: 16px;--mantine-spacing-md: 24px;--mantine-spacing-lg: 32px;--mantine-spacing-xl: 40px;--mantine-line-height-md: 1.5;--mantine-shadow-xs: 0px 1px 0px rgba(4, 8, 31, 0.08);--mantine-shadow-sm: 0px 2px 4px rgba(4, 8, 31, 0.12);--mantine-shadow-md: 0px 4px 8px rgba(4, 8, 31, 0.08);--mantine-shadow-lg: 0px 8px 16px rgba(7, 12, 41, 0.06);--mantine-shadow-xl: 0px 16px 24px rgba(4, 8, 31, 0.06);--mantine-primary-color-0: var(--mantine-color-action-0);--mantine-primary-color-1: var(--mantine-color-action-1);--mantine-primary-color-2: var(--mantine-color-action-2);--mantine-primary-color-3: var(--mantine-color-action-3);--mantine-primary-color-4: var(--mantine-color-action-4);--mantine-primary-color-5: var(--mantine-color-action-5);--mantine-primary-color-6: var(--mantine-color-action-6);--mantine-primary-color-7: var(--mantine-color-action-7);--mantine-primary-color-8: var(--mantine-color-action-8);--mantine-primary-color-9: var(--mantine-color-action-9);--mantine-color-gray-0: #fcfcfc;--mantine-color-gray-1: #f9f9f9;--mantine-color-gray-2: #f3f3f3;--mantine-color-gray-3: #e5e8e8;--mantine-color-gray-4: #d6dcdd;--mantine-color-gray-5: #b7bcc0;--mantine-color-gray-6: #6c727b;--mantine-color-gray-7: #565b66;--mantine-color-gray-8: #353a3f;--mantine-color-gray-9: #282829;--mantine-color-red-0: #fff8f8;--mantine-color-red-1: #ffd7d3;--mantine-color-red-2: #f3b4ae;--mantine-color-red-3: #ee8279;--mantine-color-red-4: #f05245;--mantine-color-red-5: #e03729;--mantine-color-red-6: #cd2113;--mantine-color-red-7: #a11409;--mantine-color-red-8: #80130a;--mantine-color-red-9: #600a03;--mantine-color-indigo-0: #f2f3ff;--mantine-color-indigo-1: #ced4f4;--mantine-color-indigo-2: #9dabf2;--mantine-color-indigo-3: #687cdf;--mantine-color-indigo-4: #4a61d4;--mantine-color-indigo-5: #2e45ba;--mantine-color-indigo-6: #24389e;--mantine-color-indigo-7: #192b8a;--mantine-color-indigo-8: #101f6b;--mantine-color-indigo-9: #071140;--mantine-color-blue-0: #e7f7ff;--mantine-color-blue-1: #c3ecff;--mantine-color-blue-2: #86d8ff;--mantine-color-blue-3: #46c4ff;--mantine-color-blue-4: #00adff;--mantine-color-blue-5: #029de7;--mantine-color-blue-6: #0387c6;--mantine-color-blue-7: #0173a9;--mantine-color-blue-8: #004c71;--mantine-color-blue-9: #003148;--mantine-color-teal-0: #edfffc;--mantine-color-teal-1: #c2fef5;--mantine-color-teal-2: #50fae3;--mantine-color-teal-3: #1cebcf;--mantine-color-teal-4: #16dcc1;--mantine-color-teal-5: #12c7ae;--mantine-color-teal-6: #0ba893;--mantine-color-teal-7: #078675;--mantine-color-teal-8: #055f53;--mantine-color-teal-9: #033932;--mantine-color-green-0: #dcf3ef;--mantine-color-green-1: #b2e3db;--mantine-color-green-2: #79d1c3;--mantine-color-green-3: #34ad95;--mantine-color-green-4: #1a8973;--mantine-color-green-5: #00634f;--mantine-color-green-6: #045242;--mantine-color-green-7: #043f33;--mantine-color-green-8: #023128;--mantine-color-green-9: #01211b;--mantine-color-lime-0: #f2fff9;--mantine-color-lime-1: #f2fff9;--mantine-color-lime-2: #f2fff9;--mantine-color-lime-3: #f2fff9;--mantine-color-lime-4: #12a344;--mantine-color-lime-5: #12a344;--mantine-color-lime-6: #12a344;--mantine-color-lime-7: #004a20;--mantine-color-lime-8: #004a20;--mantine-color-lime-9: #004a20;--mantine-color-yellow-0: #fffdea;--mantine-color-yellow-1: #fff7ba;--mantine-color-yellow-2: #ffef70;--mantine-color-yellow-3: #ffe300;--mantine-color-yellow-4: #f5d029;--mantine-color-yellow-5: #eac10b;--mantine-color-yellow-6: #e2b104;--mantine-color-yellow-7: #bd9403;--mantine-color-yellow-8: #8f7000;--mantine-color-yellow-9: #493b08;--mantine-color-action-0: #edf6ff;--mantine-color-action-1: #edf6ff;--mantine-color-action-2: #c7e4ff;--mantine-color-action-3: #8bc7ff;--mantine-color-action-4: #399ffe;--mantine-color-action-5: #1372ec;--mantine-color-action-6: #1372ec;--mantine-color-action-7: #1a50ad;--mantine-color-action-8: #1a50ad;--mantine-color-action-9: #062d70;--mantine-color-navy-0: #f5f6ff;--mantine-color-navy-1: #d6d7fd;--mantine-color-navy-2: #aeb0f1;--mantine-color-navy-3: #8787db;--mantine-color-navy-4: #6b6bbd;--mantine-color-navy-5: #525296;--mantine-color-navy-6: #3f3f71;--mantine-color-navy-7: #333357;--mantine-color-navy-8: #262646;--mantine-color-navy-9: #181d3a;--mantine-color-info-0: #f5f6ff;--mantine-color-info-1: #d6d7fd;--mantine-color-info-2: #aeb0f1;--mantine-color-info-3: #8787db;--mantine-color-info-4: #6b6bbd;--mantine-color-info-5: #525296;--mantine-color-info-6: #3f3f71;--mantine-color-info-7: #333357;--mantine-color-info-8: #262646;--mantine-color-info-9: #181d3a;--mantine-color-critical-0: #fff8f8;--mantine-color-critical-1: #ffd7d3;--mantine-color-critical-2: #f3b4ae;--mantine-color-critical-3: #ee8279;--mantine-color-critical-4: #f05245;--mantine-color-critical-5: #e03729;--mantine-color-critical-6: #cd2113;--mantine-color-critical-7: #a11409;--mantine-color-critical-8: #80130a;--mantine-color-critical-9: #600a03;--mantine-color-new-0: #edfffc;--mantine-color-new-1: #c2fef5;--mantine-color-new-2: #50fae3;--mantine-color-new-3: #1cebcf;--mantine-color-new-4: #16dcc1;--mantine-color-new-5: #12c7ae;--mantine-color-new-6: #0ba893;--mantine-color-new-7: #078675;--mantine-color-new-8: #055f53;--mantine-color-new-9: #033932;--mantine-color-warning-0: #fffdea;--mantine-color-warning-1: #fff7ba;--mantine-color-warning-2: #ffef70;--mantine-color-warning-3: #ffe300;--mantine-color-warning-4: #f5d029;--mantine-color-warning-5: #eac10b;--mantine-color-warning-6: #e2b104;--mantine-color-warning-7: #bd9403;--mantine-color-warning-8: #8f7000;--mantine-color-warning-9: #493b08;--mantine-color-success-0: #f2fff9;--mantine-color-success-1: #f2fff9;--mantine-color-success-2: #f2fff9;--mantine-color-success-3: #f2fff9;--mantine-color-success-4: #12a344;--mantine-color-success-5: #12a344;--mantine-color-success-6: #12a344;--mantine-color-success-7: #004a20;--mantine-color-success-8: #004a20;--mantine-color-success-9: #004a20;--mantine-color-purple-0: #f2ebf3;--mantine-color-purple-1: #dabfe9;--mantine-color-purple-2: #bb80dc;--mantine-color-purple-3: #9a52c1;--mantine-color-purple-4: #752e9c;--mantine-color-purple-5: #5d237d;--mantine-color-purple-6: #451c5c;--mantine-color-purple-7: #390c53;--mantine-color-purple-8: #2b073f;--mantine-color-purple-9: #180323;--mantine-h1-font-size: 48px;--mantine-h1-line-height: 1.5;--mantine-h1-font-weight: 300;--mantine-h2-font-size: 32px;--mantine-h2-line-height: 1.5;--mantine-h2-font-weight: 500;--mantine-h3-font-size: 24px;--mantine-h3-line-height: 1.5;--mantine-h3-font-weight: 500;--mantine-h4-font-size: 18px;--mantine-h4-line-height: 1.5;--mantine-h4-font-weight: 300;--mantine-h5-font-size: 14px;--mantine-h5-font-weight: 500;--mantine-h6-font-size: 12px;--mantine-h6-font-weight: 500;}:root[data-mantine-color-scheme="dark"]{--mantine-color-anchor: var(--mantine-color-action-4);--mantine-color-gray-light: rgba(108, 114, 123, 0.15);--mantine-color-gray-light-hover: rgba(108, 114, 123, 0.2);--mantine-color-gray-outline-hover: rgba(214, 220, 221, 0.05);--mantine-color-red-light: rgba(205, 33, 19, 0.15);--mantine-color-red-light-hover: rgba(205, 33, 19, 0.2);--mantine-color-red-outline-hover: rgba(240, 82, 69, 0.05);--mantine-color-indigo-light: rgba(36, 56, 158, 0.15);--mantine-color-indigo-light-hover: rgba(36, 56, 158, 0.2);--mantine-color-indigo-outline-hover: rgba(74, 97, 212, 0.05);--mantine-color-blue-light: rgba(3, 135, 198, 0.15);--mantine-color-blue-light-hover: rgba(3, 135, 198, 0.2);--mantine-color-blue-outline-hover: rgba(0, 173, 255, 0.05);--mantine-color-teal-light: rgba(11, 168, 147, 0.15);--mantine-color-teal-light-hover: rgba(11, 168, 147, 0.2);--mantine-color-teal-outline-hover: rgba(22, 220, 193, 0.05);--mantine-color-green-light: rgba(4, 82, 66, 0.15);--mantine-color-green-light-hover: rgba(4, 82, 66, 0.2);--mantine-color-green-outline-hover: rgba(26, 137, 115, 0.05);--mantine-color-lime-light: rgba(18, 163, 68, 0.15);--mantine-color-lime-light-hover: rgba(18, 163, 68, 0.2);--mantine-color-lime-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-yellow-light: rgba(226, 177, 4, 0.15);--mantine-color-yellow-light-hover: rgba(226, 177, 4, 0.2);--mantine-color-yellow-outline-hover: rgba(245, 208, 41, 0.05);--mantine-color-action-text: var(--mantine-color-action-4);--mantine-color-action-filled: var(--mantine-color-action-8);--mantine-color-action-filled-hover: var(--mantine-color-action-9);--mantine-color-action-light: rgba(19, 114, 236, 0.15);--mantine-color-action-light-hover: rgba(19, 114, 236, 0.2);--mantine-color-action-light-color: var(--mantine-color-action-3);--mantine-color-action-outline: var(--mantine-color-action-4);--mantine-color-action-outline-hover: rgba(57, 159, 254, 0.05);--mantine-color-navy-text: var(--mantine-color-navy-4);--mantine-color-navy-filled: var(--mantine-color-navy-8);--mantine-color-navy-filled-hover: var(--mantine-color-navy-9);--mantine-color-navy-light: rgba(63, 63, 113, 0.15);--mantine-color-navy-light-hover: rgba(63, 63, 113, 0.2);--mantine-color-navy-light-color: var(--mantine-color-navy-3);--mantine-color-navy-outline: var(--mantine-color-navy-4);--mantine-color-navy-outline-hover: rgba(107, 107, 189, 0.05);--mantine-color-info-text: var(--mantine-color-info-4);--mantine-color-info-filled: var(--mantine-color-info-8);--mantine-color-info-filled-hover: var(--mantine-color-info-9);--mantine-color-info-light: rgba(63, 63, 113, 0.15);--mantine-color-info-light-hover: rgba(63, 63, 113, 0.2);--mantine-color-info-light-color: var(--mantine-color-info-3);--mantine-color-info-outline: var(--mantine-color-info-4);--mantine-color-info-outline-hover: rgba(107, 107, 189, 0.05);--mantine-color-critical-text: var(--mantine-color-critical-4);--mantine-color-critical-filled: var(--mantine-color-critical-8);--mantine-color-critical-filled-hover: var(--mantine-color-critical-9);--mantine-color-critical-light: rgba(205, 33, 19, 0.15);--mantine-color-critical-light-hover: rgba(205, 33, 19, 0.2);--mantine-color-critical-light-color: var(--mantine-color-critical-3);--mantine-color-critical-outline: var(--mantine-color-critical-4);--mantine-color-critical-outline-hover: rgba(240, 82, 69, 0.05);--mantine-color-new-text: var(--mantine-color-new-4);--mantine-color-new-filled: var(--mantine-color-new-8);--mantine-color-new-filled-hover: var(--mantine-color-new-9);--mantine-color-new-light: rgba(11, 168, 147, 0.15);--mantine-color-new-light-hover: rgba(11, 168, 147, 0.2);--mantine-color-new-light-color: var(--mantine-color-new-3);--mantine-color-new-outline: var(--mantine-color-new-4);--mantine-color-new-outline-hover: rgba(22, 220, 193, 0.05);--mantine-color-warning-text: var(--mantine-color-warning-4);--mantine-color-warning-filled: var(--mantine-color-warning-8);--mantine-color-warning-filled-hover: var(--mantine-color-warning-9);--mantine-color-warning-light: rgba(226, 177, 4, 0.15);--mantine-color-warning-light-hover: rgba(226, 177, 4, 0.2);--mantine-color-warning-light-color: var(--mantine-color-warning-3);--mantine-color-warning-outline: var(--mantine-color-warning-4);--mantine-color-warning-outline-hover: rgba(245, 208, 41, 0.05);--mantine-color-success-text: var(--mantine-color-success-4);--mantine-color-success-filled: var(--mantine-color-success-8);--mantine-color-success-filled-hover: var(--mantine-color-success-9);--mantine-color-success-light: rgba(18, 163, 68, 0.15);--mantine-color-success-light-hover: rgba(18, 163, 68, 0.2);--mantine-color-success-light-color: var(--mantine-color-success-3);--mantine-color-success-outline: var(--mantine-color-success-4);--mantine-color-success-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-purple-text: var(--mantine-color-purple-4);--mantine-color-purple-filled: var(--mantine-color-purple-8);--mantine-color-purple-filled-hover: var(--mantine-color-purple-9);--mantine-color-purple-light: rgba(69, 28, 92, 0.15);--mantine-color-purple-light-hover: rgba(69, 28, 92, 0.2);--mantine-color-purple-light-color: var(--mantine-color-purple-3);--mantine-color-purple-outline: var(--mantine-color-purple-4);--mantine-color-purple-outline-hover: rgba(117, 46, 156, 0.05);}:root[data-mantine-color-scheme="light"]{--mantine-color-text: #282829;--mantine-color-anchor: var(--mantine-color-action-6);--mantine-color-dark-light: #C9C9C9;--mantine-color-dark-light-hover: #b8b8b8;--mantine-color-gray-light: #f9f9f9;--mantine-color-gray-light-hover: #f3f3f3;--mantine-color-gray-outline-hover: rgba(108, 114, 123, 0.05);--mantine-color-red-light: #fff8f8;--mantine-color-red-light-hover: #ffd7d3;--mantine-color-red-outline-hover: rgba(205, 33, 19, 0.05);--mantine-color-pink-light: #fff0f6;--mantine-color-pink-light-hover: #ffdeeb;--mantine-color-grape-light: #f8f0fc;--mantine-color-grape-light-hover: #f3d9fa;--mantine-color-violet-light: #f3f0ff;--mantine-color-violet-light-hover: #e5dbff;--mantine-color-indigo-light: #f2f3ff;--mantine-color-indigo-light-hover: #ced4f4;--mantine-color-indigo-outline-hover: rgba(36, 56, 158, 0.05);--mantine-color-blue-light: #e7f7ff;--mantine-color-blue-light-hover: #c3ecff;--mantine-color-blue-outline-hover: rgba(3, 135, 198, 0.05);--mantine-color-cyan-light: #e3fafc;--mantine-color-cyan-light-hover: #c5f6fa;--mantine-color-teal-light: #edfffc;--mantine-color-teal-light-hover: #c2fef5;--mantine-color-teal-outline-hover: rgba(11, 168, 147, 0.05);--mantine-color-green-light: #dcf3ef;--mantine-color-green-light-hover: #b2e3db;--mantine-color-green-outline-hover: rgba(4, 82, 66, 0.05);--mantine-color-lime-light: #f2fff9;--mantine-color-lime-light-hover: #f2fff9;--mantine-color-lime-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-yellow-light: #fffdea;--mantine-color-yellow-light-hover: #fff7ba;--mantine-color-yellow-outline-hover: rgba(226, 177, 4, 0.05);--mantine-color-orange-light: #fff4e6;--mantine-color-orange-light-hover: #ffe8cc;--mantine-color-action-text: var(--mantine-color-action-filled);--mantine-color-action-filled: var(--mantine-color-action-6);--mantine-color-action-filled-hover: var(--mantine-color-action-7);--mantine-color-action-light: #edf6ff;--mantine-color-action-light-hover: #edf6ff;--mantine-color-action-light-color: var(--mantine-color-action-6);--mantine-color-action-outline: var(--mantine-color-action-6);--mantine-color-action-outline-hover: rgba(19, 114, 236, 0.05);--mantine-color-navy-text: var(--mantine-color-navy-filled);--mantine-color-navy-filled: var(--mantine-color-navy-6);--mantine-color-navy-filled-hover: var(--mantine-color-navy-7);--mantine-color-navy-light: #f5f6ff;--mantine-color-navy-light-hover: #d6d7fd;--mantine-color-navy-light-color: var(--mantine-color-navy-6);--mantine-color-navy-outline: var(--mantine-color-navy-6);--mantine-color-navy-outline-hover: rgba(63, 63, 113, 0.05);--mantine-color-info-text: var(--mantine-color-info-filled);--mantine-color-info-filled: var(--mantine-color-info-6);--mantine-color-info-filled-hover: var(--mantine-color-info-7);--mantine-color-info-light: #f5f6ff;--mantine-color-info-light-hover: #d6d7fd;--mantine-color-info-light-color: var(--mantine-color-info-6);--mantine-color-info-outline: var(--mantine-color-info-6);--mantine-color-info-outline-hover: rgba(63, 63, 113, 0.05);--mantine-color-critical-text: var(--mantine-color-critical-filled);--mantine-color-critical-filled: var(--mantine-color-critical-6);--mantine-color-critical-filled-hover: var(--mantine-color-critical-7);--mantine-color-critical-light: #fff8f8;--mantine-color-critical-light-hover: #ffd7d3;--mantine-color-critical-light-color: var(--mantine-color-critical-6);--mantine-color-critical-outline: var(--mantine-color-critical-6);--mantine-color-critical-outline-hover: rgba(205, 33, 19, 0.05);--mantine-color-new-text: var(--mantine-color-new-filled);--mantine-color-new-filled: var(--mantine-color-new-6);--mantine-color-new-filled-hover: var(--mantine-color-new-7);--mantine-color-new-light: #edfffc;--mantine-color-new-light-hover: #c2fef5;--mantine-color-new-light-color: var(--mantine-color-new-6);--mantine-color-new-outline: var(--mantine-color-new-6);--mantine-color-new-outline-hover: rgba(11, 168, 147, 0.05);--mantine-color-warning-text: var(--mantine-color-warning-filled);--mantine-color-warning-filled: var(--mantine-color-warning-6);--mantine-color-warning-filled-hover: var(--mantine-color-warning-7);--mantine-color-warning-light: #fffdea;--mantine-color-warning-light-hover: #fff7ba;--mantine-color-warning-light-color: var(--mantine-color-warning-6);--mantine-color-warning-outline: var(--mantine-color-warning-6);--mantine-color-warning-outline-hover: rgba(226, 177, 4, 0.05);--mantine-color-success-text: var(--mantine-color-success-filled);--mantine-color-success-filled: var(--mantine-color-success-6);--mantine-color-success-filled-hover: var(--mantine-color-success-7);--mantine-color-success-light: #f2fff9;--mantine-color-success-light-hover: #f2fff9;--mantine-color-success-light-color: var(--mantine-color-success-6);--mantine-color-success-outline: var(--mantine-color-success-6);--mantine-color-success-outline-hover: rgba(18, 163, 68, 0.05);--mantine-color-purple-text: var(--mantine-color-purple-filled);--mantine-color-purple-filled: var(--mantine-color-purple-6);--mantine-color-purple-filled-hover: var(--mantine-color-purple-7);--mantine-color-purple-light: #f2ebf3;--mantine-color-purple-light-hover: #dabfe9;--mantine-color-purple-light-color: var(--mantine-color-purple-6);--mantine-color-purple-outline: var(--mantine-color-purple-6);--mantine-color-purple-outline-hover: rgba(69, 28, 92, 0.05);}
-  </style>
   <style
     data-mantine-styles="classes"
   >

package/src/components/inline-confirm/InlineConfirm.tsx

@@ -1,11 +1,20 @@
-import {Factory, StylesApiProps, useProps} from '@mantine/core';
-import {MantineComponent} from '@mantine/core/lib/core/factory/factory';
+import {Factory, MantineComponent, StylesApiProps, useProps} from '@mantine/core';
 import {Children, ReactElement, ReactNode, useState} from 'react';
 import {InlineConfirmProvider} from './InlineConfirmContext';
 import {InlineConfirmPrompt} from './InlineConfirmPrompt';
 
 import {InlineConfirmTarget} from './InlineConfirmTarget';
 
+/**
+ * Direct children of InlineConfirm that wraps an InlineConfirm.Prompt need this prop
+ */
+export interface InlineConfirmComponentsProps {
+    /**
+     * Unique id to map the prompt to the target
+     */
+    inlineConfirmId: string;
+}
+
 export interface InlineConfirmProps extends StylesApiProps<InlineConfirmFactory> {
     /**
      * The content of the component. Should contain at least one `InlineConfirm.Target` and one `InlineConfirm.Prompt` with matching ids
@@ -30,10 +39,9 @@ export const InlineConfirm = ((_props) => {
 
     const convertedChildren = Children.toArray(children) as ReactElement[];
     const prompt = convertedChildren.find(
-        (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId,
+        (child) => child.type !== InlineConfirmTarget && child.props?.inlineConfirmId === confirmingId,
     );
     const clearConfirm = () => setConfirmingId(null);
-
     return (
         <InlineConfirmProvider value={{confirmingId, setConfirmingId, clearConfirm}}>
             {prompt ?? children}

package/src/components/inline-confirm/InlineConfirmPrompt.tsx

@@ -1,14 +1,11 @@
 import {Factory, factory, Group, GroupProps, isElement, useProps} from '@mantine/core';
 import {cloneElement, ReactElement, ReactNode, useEffect} from 'react';
+import {Button} from '../button/Button';
+import {InlineConfirmComponentsProps} from './InlineConfirm';
 
 import {useInlineConfirm} from './InlineConfirmContext';
-import {Button} from '../button/Button';
 
-interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'> {
-    /**
-     * Unique id to map the prompt to the target
-     */
-    id: string;
+interface InlineConfirmPromptProps extends Omit<GroupProps, 'children'>, InlineConfirmComponentsProps {
     /**
      * Label element
      *
@@ -52,7 +49,7 @@ const defaultProps: Partial<InlineConfirmPromptProps> = {
 };
 
 export const InlineConfirmPrompt = factory<InlineConfirmPromptFactory>((props, ref) => {
-    const {id, label, confirm, cancel, onConfirm, onCancel, ...others} = useProps(
+    const {inlineConfirmId, label, confirm, cancel, onConfirm, onCancel, ...others} = useProps(
         'InlineConfirmPrompt',
         defaultProps,
         props,
@@ -80,12 +77,12 @@ export const InlineConfirmPrompt = factory<InlineConfirmPromptFactory>((props, r
     });
 
     useEffect(() => {
-        if (confirmingId !== id) {
+        if (confirmingId !== inlineConfirmId) {
             clearConfirm();
         }
     }, []);
 
-    if (confirmingId === id) {
+    if (confirmingId === inlineConfirmId) {
         return (
             <Group ref={ref} {...others}>
                 {label}

package/src/components/inline-confirm/InlineConfirmTarget.tsx

@@ -1,22 +1,27 @@
 import {createPolymorphicComponent} from '@mantine/core';
 import {forwardRef, MouseEventHandler} from 'react';
 import {Button, ButtonProps} from '../button';
+import {InlineConfirmComponentsProps} from './InlineConfirm';
 import {useInlineConfirm} from './InlineConfirmContext';
 
-export interface InlineConfirmTargetProps extends ButtonProps {
-    id: string;
+export interface InlineConfirmTargetProps extends ButtonProps, InlineConfirmComponentsProps {
     onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 
 export const InlineConfirmTarget = createPolymorphicComponent<typeof Button, InlineConfirmTargetProps>(
     forwardRef(
         (
-            {onClick, id, component: Component = Button, ...others}: InlineConfirmTargetProps & {component?: any},
+            {
+                onClick,
+                inlineConfirmId,
+                component: Component = Button,
+                ...others
+            }: InlineConfirmTargetProps & {component?: any},
             ref,
         ) => {
             const {setConfirmingId} = useInlineConfirm();
             const handleOnClick: MouseEventHandler<HTMLButtonElement> = (e) => {
-                setConfirmingId(id);
+                setConfirmingId(inlineConfirmId);
                 onClick?.(e);
             };
 

package/src/components/inline-confirm/__tests__/InlineConfirm.spec.tsx

@@ -1,7 +1,7 @@
 import {Button, Menu} from '@mantine/core';
 import {render, screen, userEvent} from '@test-utils';
 
-import {InlineConfirm} from '../InlineConfirm';
+import {InlineConfirm, InlineConfirmComponentsProps} from '../InlineConfirm';
 
 describe('InlineConfirm', () => {
     it('renders its children', () => {
@@ -15,7 +15,7 @@ describe('InlineConfirm', () => {
         const onClickSpy = vi.fn();
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="delete" onClick={onClickSpy}>
+                <InlineConfirm.Target inlineConfirmId="delete" onClick={onClickSpy}>
                     Delete
                 </InlineConfirm.Target>
             </InlineConfirm>,
@@ -36,7 +36,7 @@ describe('InlineConfirm', () => {
                         <button>open menu</button>
                     </Menu.Target>
                     <Menu.Dropdown>
-                        <InlineConfirm.Target component={Menu.Item} id="delete" onClick={onClickSpy}>
+                        <InlineConfirm.Target component={Menu.Item} inlineConfirmId="delete" onClick={onClickSpy}>
                             Delete
                         </InlineConfirm.Target>
                     </Menu.Dropdown>
@@ -54,8 +54,28 @@ describe('InlineConfirm', () => {
         const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="my-button-id">Remove</InlineConfirm.Target>
-                <InlineConfirm.Prompt id="my-button-id" />
+                <InlineConfirm.Target inlineConfirmId="my-button-id">Remove</InlineConfirm.Target>
+                <InlineConfirm.Prompt inlineConfirmId="my-button-id" />
+            </InlineConfirm>,
+        );
+        expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Remove'})).toBeVisible();
+
+        await user.click(screen.getByRole('button', {name: 'Remove'}));
+
+        expect(screen.getByText('Are you sure?')).toBeVisible();
+        expect(screen.queryByRole('button', {name: 'Remove'})).not.toBeInTheDocument();
+    });
+
+    it('replace the children with a prompt when clicking on a button which requires confirmation even if the prompt is nested', async () => {
+        const user = userEvent.setup();
+        const Fixture = ({inlineConfirmId}: InlineConfirmComponentsProps) => (
+            <InlineConfirm.Prompt inlineConfirmId={inlineConfirmId} />
+        );
+        render(
+            <InlineConfirm>
+                <InlineConfirm.Target inlineConfirmId="my-button-id">Remove</InlineConfirm.Target>
+                <Fixture inlineConfirmId="my-button-id" />
             </InlineConfirm>,
         );
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
@@ -72,9 +92,9 @@ describe('InlineConfirm', () => {
         const confirmSpy = vi.fn();
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="my-button-id">Remove</InlineConfirm.Target>
+                <InlineConfirm.Target inlineConfirmId="my-button-id">Remove</InlineConfirm.Target>
                 <InlineConfirm.Prompt
-                    id="my-button-id"
+                    inlineConfirmId="my-button-id"
                     label="Remove?"
                     confirm={<Button onClick={confirmSpy}>I confirm</Button>}
                     cancel={<Button>I changed my mind</Button>}
@@ -101,17 +121,17 @@ describe('InlineConfirm', () => {
         const user = userEvent.setup({delay: null});
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="remove">Remove</InlineConfirm.Target>
+                <InlineConfirm.Target inlineConfirmId="remove">Remove</InlineConfirm.Target>
                 <InlineConfirm.Prompt
-                    id="remove"
+                    inlineConfirmId="remove"
                     label="Delete X?"
                     confirm={<Button>I confirm</Button>}
                     cancel={<Button>Cancel</Button>}
                 />
 
-                <InlineConfirm.Target id="print">Print</InlineConfirm.Target>
+                <InlineConfirm.Target inlineConfirmId="print">Print</InlineConfirm.Target>
                 <InlineConfirm.Prompt
-                    id="print"
+                    inlineConfirmId="print"
                     label="Print?"
                     confirm={<Button>Yes</Button>}
                     cancel={<Button>No, save the trees</Button>}
@@ -135,7 +155,12 @@ describe('InlineConfirm', () => {
         const onClickSpy = vi.fn();
         render(
             <InlineConfirm>
-                <InlineConfirm.Target id="delete" onClick={onClickSpy} disabled disabledTooltip="You shall not pass">
+                <InlineConfirm.Target
+                    inlineConfirmId="delete"
+                    onClick={onClickSpy}
+                    disabled
+                    disabledTooltip="You shall not pass"
+                >
                     Delete
                 </InlineConfirm.Target>
             </InlineConfirm>,

package/src/components/table/Table.module.css

@@ -19,8 +19,14 @@
 }
 
 /* Table.Actions */
+.actionsDropdown {
+    text-align: left;
+}
 .actionsGroup {
-    display: inline-flex;
+    &:has(.actionsGroupItems:empty) {
+        /* Hide empty groups */
+        display: none;
+    }
 }
 
 /* Table.Filter */
@@ -37,6 +43,7 @@
     background-color: var(--mantine-color-gray-1);
     padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
+    min-height: 69px;
 }
 
 .headerGridInner {