@coveord/plasma-mantine 49.2.0 → 49.2.3

package/dist/esm/hooks/useControlledList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useControlledList.ts"],"sourcesContent":["import {useUncontrolled} from '@mantine/hooks';\n\ninterface UseControlledList<T> {\n    /** Initial value for uncontrolled state */\n    defaultValue?: T[];\n    /** Value for controlled state */\n    value?: T[];\n    /** Controlled state onChange handler */\n    onChange?: (values: T[]) => void;\n}\n\ninterface ListHandlers<T> {\n    /** Appends the item at the end of the list */\n    append: (item: T) => void;\n    /** Removes the item at the index from the list */\n    remove: (index: number) => void;\n    /** Moves the item at the \"from\" position to another position within the list  */\n    reorder: ({from, to}: {from: number; to: number}) => void;\n}\n\n/**\n * Manage a list of items in a controlled fashion, to be used with inputs\n */\nexport const useControlledList = <T>({defaultValue, value, onChange}: UseControlledList<T>): [T[], ListHandlers<T>] => {\n    const [values, handleChange] = useUncontrolled({\n        value,\n        defaultValue,\n        finalValue: [],\n        onChange,\n    });\n\n    const remove = (index: number) => {\n        const newValues = values.filter((_, i) => i !== index);\n        handleChange?.(newValues);\n    };\n\n    const append = (item: T) => {\n        const newValues = [...values, item];\n        handleChange?.(newValues);\n    };\n\n    const reorder = ({from, to}: {from: number; to: number}) => {\n        const newValues = [...values];\n        const item = values[from];\n\n        newValues.splice(from, 1);\n        newValues.splice(to, 0, item);\n\n        handleChange?.(newValues);\n    };\n\n    return [values, {remove, append, reorder}];\n};\n"],"names":["useUncontrolled","useControlledList","defaultValue","value","onChange","finalValue","values","handleChange","remove","index","newValues","filter","_","i","append","item","reorder","from","to","splice"],"mappings":"AAAA;;AAAA,SAAQA,eAAe,QAAO,iBAAiB;AAoB/C;;CAEC,GACD,OAAO,IAAMC,oBAAoB,gBAAsF;QAAjFC,qBAAAA,cAAcC,cAAAA,OAAOC,iBAAAA;IACvD,IAA+BJ,oCAAAA,gBAAgB;QAC3CG,OAAAA;QACAD,cAAAA;QACAG,YAAY,EAAE;QACdD,UAAAA;IACJ,QALOE,SAAwBN,qBAAhBO,eAAgBP;IAO/B,IAAMQ,SAAS,SAACC,OAAkB;QAC9B,IAAMC,YAAYJ,OAAOK,MAAM,CAAC,SAACC,GAAGC;mBAAMA,MAAMJ;;QAChDF,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeG;IACnB;IAEA,IAAMI,SAAS,SAACC,MAAY;QACxB,IAAML,YAAY,AAAC,qBAAGJ,eAAJ;YAAYS;SAAK;QACnCR,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeG;IACnB;IAEA,IAAMM,UAAU,gBAA4C;YAA1CC,aAAAA,MAAMC,WAAAA;QACpB,IAAMR,YAAa,qBAAGJ;QACtB,IAAMS,OAAOT,MAAM,CAACW,KAAK;QAEzBP,UAAUS,MAAM,CAACF,MAAM;QACvBP,UAAUS,MAAM,CAACD,IAAI,GAAGH;QAExBR,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeG;IACnB;IAEA,OAAO;QAACJ;QAAQ;YAACE,QAAAA;YAAQM,QAAAA;YAAQE,SAAAA;QAAO;KAAE;AAC9C,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useControlledList.ts"],"sourcesContent":["import {useUncontrolled} from '@mantine/hooks';\n\ninterface UseControlledList<T> {\n    /** Initial value for uncontrolled state */\n    defaultValue?: T[];\n    /** Value for controlled state */\n    value?: T[];\n    /** Controlled state onChange handler */\n    onChange?: (values: T[]) => void;\n}\n\ninterface ListHandlers<T> {\n    /** Appends the item at the end of the list */\n    append: (item: T) => void;\n    /** Removes the item at the index from the list */\n    remove: (index: number) => void;\n    /** Moves the item at the \"from\" position to another position within the list  */\n    reorder: ({from, to}: {from: number; to: number}) => void;\n}\n\n/**\n * Manage a list of items in a controlled fashion, to be used with inputs\n */\nexport const useControlledList = <T>({defaultValue, value, onChange}: UseControlledList<T>): [T[], ListHandlers<T>] => {\n    const [values, handleChange] = useUncontrolled({\n        value,\n        defaultValue,\n        finalValue: [],\n        onChange,\n    });\n\n    const remove = (index: number) => {\n        const newValues = values.filter((_, i) => i !== index);\n        handleChange?.(newValues);\n    };\n\n    const append = (item: T) => {\n        const newValues = [...values, item];\n        handleChange?.(newValues);\n    };\n\n    const reorder = ({from, to}: {from: number; to: number}) => {\n        const newValues = [...values];\n        const item = values[from];\n\n        newValues.splice(from, 1);\n        newValues.splice(to, 0, item);\n\n        handleChange?.(newValues);\n    };\n\n    return [values, {remove, append, reorder}];\n};\n"],"names":["useUncontrolled","useControlledList","defaultValue","value","onChange","finalValue","values","handleChange","remove","index","newValues","filter","_","i","append","item","reorder","from","to","splice"],"mappings":";;AAAA,SAAQA,eAAe,QAAO,iBAAiB;AAoB/C;;CAEC,GACD,OAAO,IAAMC,oBAAoB,gBAAsF;QAAjFC,qBAAAA,cAAcC,cAAAA,OAAOC,iBAAAA;IACvD,IAA+BJ,oCAAAA,gBAAgB;QAC3CG,OAAAA;QACAD,cAAAA;QACAG,YAAY,EAAE;QACdD,UAAAA;IACJ,QALOE,SAAwBN,qBAAhBO,eAAgBP;IAO/B,IAAMQ,SAAS,SAACC,OAAkB;QAC9B,IAAMC,YAAYJ,OAAOK,MAAM,CAAC,SAACC,GAAGC;mBAAMA,MAAMJ;;QAChDF,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeG;IACnB;IAEA,IAAMI,SAAS,SAACC,MAAY;QACxB,IAAML,YAAY,AAAC,qBAAGJ,eAAJ;YAAYS;SAAK;QACnCR,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeG;IACnB;IAEA,IAAMM,UAAU,gBAA4C;YAA1CC,aAAAA,MAAMC,WAAAA;QACpB,IAAMR,YAAa,qBAAGJ;QACtB,IAAMS,OAAOT,MAAM,CAACW,KAAK;QAEzBP,UAAUS,MAAM,CAACF,MAAM;QACvBP,UAAUS,MAAM,CAACD,IAAI,GAAGH;QAExBR,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeG;IACnB;IAEA,OAAO;QAACJ;QAAQ;YAACE,QAAAA;YAAQM,QAAAA;YAAQE,SAAAA;QAAO;KAAE;AAC9C,EAAE"}

package/dist/esm/hooks/useParentHeight.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useParentHeight.ts"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n\nconst getElementInnerHeight = (el: HTMLElement): number => {\n    const fullHeight = el.getBoundingClientRect().height;\n    const cs = getComputedStyle(el);\n    const padding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);\n    const border = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n    return fullHeight - padding - border;\n};\n\n/**\n * Computes the available height of the parent element on mount\n */\nexport const useParentHeight = (): [number, React.MutableRefObject<HTMLDivElement>] => {\n    const [height, setHeight] = useState(-1);\n    const ref = useRef<HTMLDivElement>();\n\n    useEffect(() => {\n        if (ref.current) {\n            setHeight(getElementInnerHeight(ref.current.parentElement));\n        }\n    }, [ref.current]);\n\n    return [height, ref];\n};\n"],"names":["useEffect","useRef","useState","getElementInnerHeight","el","fullHeight","getBoundingClientRect","height","cs","getComputedStyle","padding","parseFloat","paddingTop","paddingBottom","border","borderTopWidth","borderBottomWidth","useParentHeight","setHeight","ref","current","parentElement"],"mappings":"AAAA;AAAA,SAAQA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAElD,IAAMC,wBAAwB,SAACC,IAA4B;IACvD,IAAMC,aAAaD,GAAGE,qBAAqB,GAAGC,MAAM;IACpD,IAAMC,KAAKC,iBAAiBL;IAC5B,IAAMM,UAAUC,WAAWH,GAAGI,UAAU,IAAID,WAAWH,GAAGK,aAAa;IACvE,IAAMC,SAASH,WAAWH,GAAGO,cAAc,IAAIJ,WAAWH,GAAGQ,iBAAiB;IAC9E,OAAOX,aAAaK,UAAUI;AAClC;AAEA;;CAEC,GACD,OAAO,IAAMG,kBAAkB,WAAwD;IACnF,IAA4Bf,6BAAAA,SAAS,CAAC,QAA/BK,SAAqBL,cAAbgB,YAAahB;IAC5B,IAAMiB,MAAMlB;IAEZD,UAAU,WAAM;QACZ,IAAImB,IAAIC,OAAO,EAAE;YACbF,UAAUf,sBAAsBgB,IAAIC,OAAO,CAACC,aAAa;QAC7D,CAAC;IACL,GAAG;QAACF,IAAIC,OAAO;KAAC;IAEhB,OAAO;QAACb;QAAQY;KAAI;AACxB,EAAE"}
+{"version":3,"sources":["../../../src/hooks/useParentHeight.ts"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n\nconst getElementInnerHeight = (el: HTMLElement): number => {\n    const fullHeight = el.getBoundingClientRect().height;\n    const cs = getComputedStyle(el);\n    const padding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);\n    const border = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n    return fullHeight - padding - border;\n};\n\n/**\n * Computes the available height of the parent element on mount\n */\nexport const useParentHeight = (): [number, React.MutableRefObject<HTMLDivElement>] => {\n    const [height, setHeight] = useState(-1);\n    const ref = useRef<HTMLDivElement>();\n\n    useEffect(() => {\n        if (ref.current) {\n            setHeight(getElementInnerHeight(ref.current.parentElement));\n        }\n    }, [ref.current]);\n\n    return [height, ref];\n};\n"],"names":["useEffect","useRef","useState","getElementInnerHeight","el","fullHeight","getBoundingClientRect","height","cs","getComputedStyle","padding","parseFloat","paddingTop","paddingBottom","border","borderTopWidth","borderBottomWidth","useParentHeight","setHeight","ref","current","parentElement"],"mappings":";AAAA,SAAQA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAElD,IAAMC,wBAAwB,SAACC,IAA4B;IACvD,IAAMC,aAAaD,GAAGE,qBAAqB,GAAGC,MAAM;IACpD,IAAMC,KAAKC,iBAAiBL;IAC5B,IAAMM,UAAUC,WAAWH,GAAGI,UAAU,IAAID,WAAWH,GAAGK,aAAa;IACvE,IAAMC,SAASH,WAAWH,GAAGO,cAAc,IAAIJ,WAAWH,GAAGQ,iBAAiB;IAC9E,OAAOX,aAAaK,UAAUI;AAClC;AAEA;;CAEC,GACD,OAAO,IAAMG,kBAAkB,WAAwD;IACnF,IAA4Bf,6BAAAA,SAAS,CAAC,QAA/BK,SAAqBL,cAAbgB,YAAahB;IAC5B,IAAMiB,MAAMlB;IAEZD,UAAU,WAAM;QACZ,IAAImB,IAAIC,OAAO,EAAE;YACbF,UAAUf,sBAAsBgB,IAAIC,OAAO,CAACC,aAAa;QAC7D,CAAC;IACL,GAAG;QAACF,IAAIC,OAAO;KAAC;IAEhB,OAAO;QAACb;QAAQY;KAAI;AACxB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import {MantineProvider} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {plasmaTheme} from './Theme';\n\nexport const Plasmantine: FunctionComponent<PropsWithChildren> = ({children}) => (\n    <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>\n        {children}\n    </MantineProvider>\n);\n"],"names":["MantineProvider","plasmaTheme","Plasmantine","children","withGlobalStyles","withNormalizeCSS","theme"],"mappings":"AAAA;AAAA,SAAQA,eAAe,QAAO,gBAAgB;AAG9C,SAAQC,WAAW,QAAO,UAAU;AAEpC,OAAO,IAAMC,cAAoD;QAAEC,iBAAAA;yBAC/D,KAACH;QAAgBI,gBAAgB;QAACC,gBAAgB;QAACC,OAAOL;kBACrDE;;EAEP"}
+{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import {MantineProvider} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {plasmaTheme} from './Theme';\n\nexport const Plasmantine: FunctionComponent<PropsWithChildren> = ({children}) => (\n    <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>\n        {children}\n    </MantineProvider>\n);\n"],"names":["MantineProvider","plasmaTheme","Plasmantine","children","withGlobalStyles","withNormalizeCSS","theme"],"mappings":";AAAA,SAAQA,eAAe,QAAO,gBAAgB;AAG9C,SAAQC,WAAW,QAAO,UAAU;AAEpC,OAAO,IAAMC,cAAoD;QAAEC,iBAAAA;yBAC/D,KAACH;QAAgBI,gBAAgB;QAACC,gBAAgB;QAACC,OAAOL;kBACrDE;;EAEP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n            h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n            h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n            h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n            h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n            h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\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        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n                },\n            }),\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    fontWeight: 400,\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),\n                },\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n            styles: (theme) => ({\n                label: {\n                    marginBottom: theme.spacing.xs,\n                    lineHeight: '20px',\n                },\n                description: {\n                    lineHeight: '20px',\n                    fontSize: theme.fontSizes.sm,\n                    color: theme.colors.gray[7],\n                    marginBottom: theme.spacing.xs,\n                },\n                invalid: {\n                    color: theme.colors.red[9],\n                    borderColor: theme.colors.red[6],\n                },\n                error: {\n                    color: theme.colors.red[9],\n                },\n            }),\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n                multiline: true,\n            },\n        },\n        Breadcrumbs: {\n            defaultProps: {\n                separator: <ArrowHeadRightSize24Px height={24} />,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n        ColorSwatch: {\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        },\n        MenuItem: {\n            defaultProps: {\n                fw: 300,\n            },\n        },\n    },\n};\n"],"names":["ArrowHeadRightSize24Px","InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw"],"mappings":"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"}
+{"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n    colorScheme: 'light',\n    fontFamily: 'canada-type-gibson, sans-serif',\n    black: color.primary.gray[9],\n    defaultRadius: 8,\n    spacing: {\n        xs: 8,\n        sm: 16,\n        md: 24,\n        lg: 32,\n        xl: 40,\n    },\n    primaryColor: 'action',\n    headings: {\n        fontFamily: 'canada-type-gibson, sans-serif',\n        fontWeight: 500,\n        sizes: {\n            h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n            h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n            h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n            h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n            h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n            h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\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        Alert: {\n            defaultProps: {\n                icon: <InfoSize24Px height={24} />,\n                color: 'navy',\n            },\n            styles: {\n                title: {\n                    fontWeight: 500,\n                },\n            },\n        },\n        Title: {\n            styles: (theme) => ({\n                root: {\n                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n                },\n            }),\n        },\n        Button: {\n            styles: (theme, params: ButtonStylesParams) => ({\n                root: {\n                    fontWeight: 400,\n                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n                },\n            }),\n        },\n        Modal: {\n            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n                modal: {\n                    width: fullScreen\n                        ? undefined\n                        : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),\n                },\n            }),\n            defaultProps: {\n                overlayColor: color.primary.navy[9],\n                overlayOpacity: 0.9,\n            },\n        },\n        InputWrapper: {\n            defaultProps: {\n                withAsterisk: false,\n            },\n            styles: (theme) => ({\n                label: {\n                    marginBottom: theme.spacing.xs,\n                    lineHeight: '20px',\n                },\n                description: {\n                    lineHeight: '20px',\n                    fontSize: theme.fontSizes.sm,\n                    color: theme.colors.gray[7],\n                    marginBottom: theme.spacing.xs,\n                },\n                invalid: {\n                    color: theme.colors.red[9],\n                    borderColor: theme.colors.red[6],\n                },\n                error: {\n                    color: theme.colors.red[9],\n                },\n            }),\n        },\n        TextInput: {\n            defaultProps: {\n                radius: 8,\n            },\n        },\n        Tooltip: {\n            defaultProps: {\n                color: 'navy',\n                withArrow: true,\n                withinPortal: true,\n                multiline: true,\n            },\n        },\n        Breadcrumbs: {\n            defaultProps: {\n                separator: <ArrowHeadRightSize24Px height={24} />,\n            },\n        },\n        Loader: {\n            defaultProps: {\n                variant: 'dots',\n                color: 'action',\n            },\n        },\n        DateRangePicker: {\n            styles: {\n                cell: {\n                    textAlign: 'center',\n                },\n            },\n        },\n        Anchor: {\n            defaultProps: {\n                color: 'action',\n            },\n            styles: (theme) => ({\n                root: {\n                    ...theme.fn.hover({\n                        textDecoration: 'underline',\n                        color: theme.colors.action[8],\n                    }),\n                },\n            }),\n        },\n        Checkbox: {\n            defaultProps: {\n                radius: 'sm',\n            },\n        },\n        List: {\n            styles: () => ({\n                root: {\n                    listStyleType: 'disc',\n                },\n            }),\n        },\n        Radio: {\n            styles: {\n                labelWrapper: {\n                    display: 'flex',\n                    alignItems: 'flex-start',\n                },\n            },\n        },\n        Popover: {\n            defaultProps: {\n                shadow: 'md',\n                withArrow: true,\n            },\n        },\n        Badge: {\n            styles: {\n                root: {\n                    textTransform: 'none',\n                    padding: '4px 8px',\n                    fontWeight: 500,\n                },\n            },\n        },\n        ColorSwatch: {\n            defaultProps: {\n                size: 8,\n                withShadow: false,\n            },\n        },\n        MenuItem: {\n            defaultProps: {\n                fw: 300,\n            },\n        },\n    },\n};\n"],"names":["ArrowHeadRightSize24Px","InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw"],"mappings":"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"}

package/dist/esm/utils/overrideComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/overrideComponent.ts"],"sourcesContent":["/**\n * Allows to override static properties from a component function\n *\n * @param component The component which holds the static properties\n * @param properties The new static properties to assign on the component\n * @returns A new component with the specified properties. It doesn't change the original component\n * @example const Menu = overrideComponent(MantineMenu, {Item: MyMenuItem}); // Menu.Item will equal MyMenuItem\n */\nexport const overrideComponent = <\n    Component extends (...args: Parameters<Component>) => ReturnType<Component>,\n    StaticProperties = Record<keyof Component, never>\n>(\n    component: Component,\n    properties: StaticProperties\n): ((...args: Parameters<Component>) => ReturnType<Component>) & Component & StaticProperties => {\n    const componentClone = (...args: Parameters<Component>) => component(...args);\n    return Object.assign(componentClone, component, properties);\n};\n"],"names":["overrideComponent","component","properties","componentClone","args","Object","assign"],"mappings":"AAAA;;;;;;;CAOC,GACD;AAAA,OAAO,IAAMA,oBAAoB,SAI7BC,WACAC,YAC6F;IAC7F,IAAMC,iBAAiB;yCAAIC;YAAAA;;eAAgCH,UAAAA,MAAAA,KAAAA,GAAU,qBAAGG;;IACxE,OAAOC,OAAOC,MAAM,CAACH,gBAAgBF,WAAWC;AACpD,EAAE"}
+{"version":3,"sources":["../../../src/utils/overrideComponent.ts"],"sourcesContent":["/**\n * Allows to override static properties from a component function\n *\n * @param component The component which holds the static properties\n * @param properties The new static properties to assign on the component\n * @returns A new component with the specified properties. It doesn't change the original component\n * @example const Menu = overrideComponent(MantineMenu, {Item: MyMenuItem}); // Menu.Item will equal MyMenuItem\n */\nexport const overrideComponent = <\n    Component extends (...args: Parameters<Component>) => ReturnType<Component>,\n    StaticProperties = Record<keyof Component, never>\n>(\n    component: Component,\n    properties: StaticProperties\n): ((...args: Parameters<Component>) => ReturnType<Component>) & Component & StaticProperties => {\n    const componentClone = (...args: Parameters<Component>) => component(...args);\n    return Object.assign(componentClone, component, properties);\n};\n"],"names":["overrideComponent","component","properties","componentClone","args","Object","assign"],"mappings":"AAAA;;;;;;;CAOC;AACD,OAAO,IAAMA,oBAAoB,SAI7BC,WACAC,YAC6F;IAC7F,IAAMC,iBAAiB;yCAAIC;YAAAA;;eAAgCH,UAAAA,MAAAA,KAAAA,GAAU,qBAAGG;;IACxE,OAAOC,OAAOC,MAAM,CAACH,gBAAgBF,WAAWC;AACpD,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "49.2.0",
+  "version": "49.2.3",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -23,7 +23,7 @@
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.34.0",
     "react-beautiful-dnd": "13.1.1",
-    "@coveord/plasma-react-icons": "48.28.3",
+    "@coveord/plasma-react-icons": "49.2.2",
     "@coveord/plasma-tokens": "48.25.0"
   },
   "devDependencies": {
@@ -35,7 +35,7 @@
     "@mantine/hooks": "5.9.2",
     "@mantine/modals": "5.9.2",
     "@swc/cli": "0.1.57",
-    "@swc/core": "1.3.22",
+    "@swc/core": "1.3.31",
     "@swc/jest": "0.2.23",
     "@testing-library/dom": "8.18.1",
     "@testing-library/jest-dom": "5.16.5",
@@ -49,8 +49,9 @@
     "@types/testing-library__jest-dom": "5.14.5",
     "csstype": "3.1.1",
     "embla-carousel-react": "7.0.4",
-    "eslint-plugin-jest": "27.1.1",
     "eslint-plugin-testing-library": "5.7.2",
+    "eslint-plugin-vitest": "0.0.32",
+    "eslint-plugin-vitest-globals": "1.2.0",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.2.1",
     "jest-environment-jsdom": "29.1.2",
@@ -60,7 +61,8 @@
     "react-dom": "18.2.0",
     "rimraf": "3.0.2",
     "tslib": "2.4.0",
-    "typescript": "4.9.3"
+    "typescript": "4.9.3",
+    "vitest": "0.28.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.0",
@@ -78,8 +80,7 @@
     "build": "node ../../scripts/build",
     "clean": "rimraf dist",
     "start": "node ../../scripts/start",
-    "test": "jest --maxWorkers=65%",
-    "test:watch": "jest --watchAll",
-    "test:debug": "node --inspect-brk node_modules/jest/bin/jest --runInBand --watchAll --detectOpenHandles --forceExit"
+    "test": "TZ=UTC vitest run",
+    "test:watch": "TZ=UTC vitest"
   }
 }

package/src/__tests__/Utils.tsx

@@ -10,6 +10,6 @@ const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>
     return render(ui, {wrapper: TestWrapper, ...options});
 };
 
-export {userEvent};
 export * from '@testing-library/react';
+export {userEvent};
 export {customRender as render};

package/src/__tests__/VitestSetup.ts

@@ -0,0 +1,27 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import {cleanup} from '@testing-library/react';
+expect.extend(matchers);
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(), // deprecated
+        removeListener: vi.fn(), // deprecated
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});
+window.ResizeObserver =
+    window.ResizeObserver ||
+    vi.fn().mockImplementation(() => ({
+        disconnect: vi.fn(),
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+    }));
+
+afterEach(() => {
+    cleanup();
+});

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

@@ -1,24 +1,26 @@
-import {useForm} from '@mantine/form';
 import {loader} from '@monaco-editor/react';
 import {render, screen, waitForElementToBeRemoved, within} from '@test-utils';
+import {useForm} from '../../../form';
 
 import {CodeEditor} from '../CodeEditor';
 import {XML} from '../languages/xml';
 
+vi.mock('monaco-editor');
+vi.mock('@monaco-editor/react');
+
 describe('CodeEditor', () => {
     beforeEach(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
     });
 
     it('renders the monaco editor and a copy to clipboard button', async () => {
-        jest.mock('monaco-editor');
         render(<CodeEditor label="label" description="description" />);
 
         await waitForElementToBeRemoved(screen.queryByRole('presentation'));
 
         expect(screen.getByText(/label/)).toBeInTheDocument();
         expect(screen.getByText(/description/)).toBeInTheDocument();
-        expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+        expect(await screen.findByTestId('monaco-editor')).toBeInTheDocument();
         expect(await screen.findByRole('button', {name: /copy/i})).toBeInTheDocument();
     });
 
@@ -56,7 +58,7 @@ describe('CodeEditor', () => {
     });
 
     it('loads the xml language in the monaco instance if the editor language is xml', async () => {
-        const xmlLanguageSpy = jest.spyOn(XML, 'register').mockImplementation();
+        const xmlLanguageSpy = vi.spyOn(XML, 'register').mockImplementation(vi.fn());
         render(<CodeEditor label="label" description="description" monacoLoader="cdn" language="xml" />);
         expect(xmlLanguageSpy).toHaveBeenCalledTimes(1);
     });

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -54,7 +54,7 @@ describe('Collection', () => {
 
     it('calls the onRemoveItem function when clicking on a remove button', async () => {
         const user = userEvent.setup({delay: null});
-        const onRemoveItemSpy = jest.fn();
+        const onRemoveItemSpy = vi.fn();
         const Fixture = () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (
@@ -128,7 +128,7 @@ describe('Collection', () => {
     });
 
     it('disables the add button whenever allowAdd callback returns false', () => {
-        const allowAdd = jest.fn().mockImplementation(() => false);
+        const allowAdd = vi.fn().mockImplementation(() => false);
         const Fixture = () => {
             const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
             return (

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx

@@ -6,8 +6,8 @@ import {DateRangePickerInlineCalendar} from '../DateRangePickerInlineCalendar';
 describe('DateRangePickerInlineCalendar', () => {
     it('calls onApply when the user clicks on the apply button', async () => {
         const user = userEvent.setup({delay: null});
-        const onApply = jest.fn();
-        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
+        const onApply = vi.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={vi.fn()} />);
 
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
@@ -17,8 +17,8 @@ describe('DateRangePickerInlineCalendar', () => {
 
     it('calls onCancel when the user clicks on the cancel button', async () => {
         const user = userEvent.setup({delay: null});
-        const onCancel = jest.fn();
-        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={jest.fn()} onCancel={onCancel} />);
+        const onCancel = vi.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={vi.fn()} onCancel={onCancel} />);
 
         await user.click(screen.getByRole('button', {name: 'Cancel'}));
 
@@ -26,14 +26,14 @@ describe('DateRangePickerInlineCalendar', () => {
     });
 
     it('does not render the preset searchbox when there is no presets', () => {
-        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={jest.fn()} onCancel={jest.fn()} />);
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={vi.fn()} onCancel={vi.fn()} />);
 
         expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
     });
 
     it('calls onApply with the selected dates when choosing a preset', async () => {
         const user = userEvent.setup({delay: null});
-        const onApply = jest.fn();
+        const onApply = vi.fn();
         render(
             <DateRangePickerInlineCalendar
                 presets={{
@@ -41,7 +41,7 @@ describe('DateRangePickerInlineCalendar', () => {
                 }}
                 initialRange={[null, null]}
                 onApply={onApply}
-                onCancel={jest.fn()}
+                onCancel={vi.fn()}
             />
         );
 
@@ -58,9 +58,9 @@ describe('DateRangePickerInlineCalendar', () => {
 
     it('calls onApply with the selected dates when clicking in the calendar', async () => {
         const user = userEvent.setup({delay: null});
-        jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
-        const onApply = jest.fn();
-        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
+        vi.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
+        const onApply = vi.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={vi.fn()} />);
 
         // click once for the start, once for the end
         await user.click(screen.getAllByRole('button', {name: '8'})[0]);
@@ -70,27 +70,27 @@ describe('DateRangePickerInlineCalendar', () => {
 
         expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 14)]);
 
-        jest.useRealTimers();
+        vi.useRealTimers();
     });
 
     it('set end date same as start date if only one date is selected when clicking in the calendar', async () => {
         const user = userEvent.setup({delay: null});
-        jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
-        const onApply = jest.fn();
-        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
+        vi.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
+        const onApply = vi.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={vi.fn()} />);
 
         await user.click(screen.getAllByRole('button', {name: '8'})[0]);
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 8)]);
 
-        jest.useRealTimers();
+        vi.useRealTimers();
     });
 
     it('calls onApply with the selected dates when typing in the inputs', async () => {
         const user = userEvent.setup({delay: null});
-        const onApply = jest.fn();
-        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
+        const onApply = vi.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={vi.fn()} />);
 
         const startInput = screen.getByRole('textbox', {
             name: /start/i,

package/src/components/date-range-picker/__tests__/DateRangePickerPopoverCalendar.spec.tsx

@@ -7,10 +7,13 @@ import {DateRangePickerPopoverCalendar} from '../DateRangePickerPopoverCalendar'
 // Since we're mocking the date and the animations are timer based we're mocking useReduceMotion to disable all the animations
 // I tried wrapping the components in <MantineProvider theme={{components: {Transition: {defaultProps: {duration: 0}}}}}>
 // but the animation was still happening. :(
-jest.mock('@mantine/hooks', () => ({
-    ...jest.requireActual('@mantine/hooks'),
-    useReducedMotion: () => true,
-}));
+vi.mock('@mantine/hooks', async () => {
+    const actual = await vi.importActual('@mantine/hooks');
+    return {
+        ...actual,
+        useReduceMotion: () => true,
+    };
+});
 
 describe('DateRangePickerPopoverCalendar', () => {
     it('does not render the preset searchbox when there is no presets', () => {
@@ -49,7 +52,7 @@ describe('DateRangePickerPopoverCalendar', () => {
 
     it('calls onApply with the selected dates when clicking in the calendar', async () => {
         const user = userEvent.setup({delay: null});
-        jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
+        vi.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
         const Fixture = () => {
             const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
             return (
@@ -67,11 +70,12 @@ describe('DateRangePickerPopoverCalendar', () => {
         await user.click(screen.getAllByRole('button', {name: '14'})[0]);
 
         // hides the calendar when the second date is clicked
-        expect(screen.queryByRole('button', {name: '8'})).not.toBeInTheDocument();
+        expect(screen.queryAllByRole('button', {name: '8'})[0]).not.toBeVisible();
+        expect(screen.queryAllByRole('button', {name: '8'})[1]).not.toBeVisible();
 
         expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T00:00:00.000Z"]');
 
-        jest.useRealTimers();
+        vi.useRealTimers();
     });
 
     it('calls onApply with the selected dates when typing in the inputs', async () => {

package/src/components/date-range-picker/__tests__/DateRangePickerPresetSelect.spec.tsx

@@ -5,7 +5,7 @@ import {DateRangePickerPresetSelect} from '../DateRangePickerPresetSelect';
 describe('DateRangePickerPresetSelect', () => {
     it('calls onChange when selecting a preset', async () => {
         const user = userEvent.setup({delay: null});
-        const onChange = jest.fn();
+        const onChange = vi.fn();
         render(
             <DateRangePickerPresetSelect
                 value={[null, null]}

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

@@ -12,7 +12,7 @@ describe('InlineConfirm', () => {
 
     it('calls the onClick prop when clicking on a button', async () => {
         const user = userEvent.setup({delay: null});
-        const onClickSpy = jest.fn();
+        const onClickSpy = vi.fn();
         render(
             <InlineConfirm>
                 <InlineConfirm.Button id="delete" onClick={onClickSpy}>
@@ -28,7 +28,7 @@ describe('InlineConfirm', () => {
 
     it('calls the onClick prop when clicking on the menu item', async () => {
         const user = userEvent.setup({delay: null});
-        const onClickSpy = jest.fn();
+        const onClickSpy = vi.fn();
         render(
             <InlineConfirm>
                 <Menu>
@@ -55,7 +55,7 @@ describe('InlineConfirm', () => {
         render(
             <InlineConfirm>
                 <InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
-                <InlineConfirm.Prompt id="my-button-id" label="Are you sure?" onConfirm={jest.fn()} />
+                <InlineConfirm.Prompt id="my-button-id" label="Are you sure?" onConfirm={vi.fn()} />
             </InlineConfirm>
         );
         expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
@@ -69,7 +69,7 @@ describe('InlineConfirm', () => {
 
     it('hides the prompt when the user cancel and call onConfirm when the user confirms', async () => {
         const user = userEvent.setup({delay: null});
-        const confirmSpy = jest.fn();
+        const confirmSpy = vi.fn();
         render(
             <InlineConfirm>
                 <InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
@@ -103,10 +103,10 @@ describe('InlineConfirm', () => {
         render(
             <InlineConfirm>
                 <InlineConfirm.Button id="remove">Remove</InlineConfirm.Button>
-                <InlineConfirm.Prompt id="remove" label="Delete X?" onConfirm={jest.fn()} />
+                <InlineConfirm.Prompt id="remove" label="Delete X?" onConfirm={vi.fn()} />
 
                 <InlineConfirm.Button id="print">Print</InlineConfirm.Button>
-                <InlineConfirm.Prompt id="print" label="Print?" onConfirm={jest.fn()} />
+                <InlineConfirm.Prompt id="print" label="Print?" onConfirm={vi.fn()} />
             </InlineConfirm>
         );
 

package/src/components/modal/__tests__/Modal.spec.tsx

@@ -6,7 +6,7 @@ import {Modal} from '../Modal';
 describe('Modal', () => {
     it('renders title, desctiption, close button, and child', () => {
         render(
-            <Modal opened onClose={jest.fn()} title="title" description="modal description">
+            <Modal opened onClose={vi.fn()} title="title" description="modal description">
                 <Container>Children</Container>
             </Modal>
         );
@@ -22,7 +22,7 @@ describe('Modal', () => {
         render(
             <Modal
                 opened
-                onClose={jest.fn()}
+                onClose={vi.fn()}
                 title={
                     <div>
                         <QuestionSize32Px />
@@ -38,7 +38,7 @@ describe('Modal', () => {
     });
 
     it('trigger onClose function when click on the close button', () => {
-        const onClose = jest.fn();
+        const onClose = vi.fn();
         render(
             <Modal opened onClose={onClose} title="title">
                 <Container>Children</Container>

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -169,7 +169,7 @@ describe('ModalWizard', () => {
         ];
 
         const isDirty = () => false;
-        const onClose = jest.fn();
+        const onClose = vi.fn();
 
         render(
             <ModalWizard isDirty={isDirty} onClose={onClose} closeButtonLabel="closebuttonlabel" opened={true}>
@@ -205,7 +205,7 @@ describe('ModalWizard', () => {
         ];
 
         const isDirty = () => false;
-        const onClose = jest.fn();
+        const onClose = vi.fn();
 
         render(
             <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
@@ -241,8 +241,8 @@ describe('ModalWizard', () => {
         ];
 
         const isDirty = () => false;
-        const onClose = jest.fn();
-        const onFinish = jest.fn();
+        const onClose = vi.fn();
+        const onFinish = vi.fn();
 
         render(
             <ModalWizard isDirty={isDirty} onClose={onClose} onFinish={onFinish} opened={true}>
@@ -278,8 +278,8 @@ describe('ModalWizard', () => {
         ];
 
         const isDirty = () => true;
-        const onClose = jest.fn();
-        const handleDirtyState = jest.fn();
+        const onClose = vi.fn();
+        const handleDirtyState = vi.fn();
 
         render(
             <ModalWizard
@@ -323,8 +323,8 @@ describe('ModalWizard', () => {
         ];
 
         const isDirty = () => true;
-        const onClose = jest.fn();
-        const handleDirtyState = jest.fn();
+        const onClose = vi.fn();
+        const handleDirtyState = vi.fn();
 
         render(
             <ModalWizard

package/src/components/prompt/__tests__/Prompt.spec.tsx

@@ -4,7 +4,7 @@ import {Prompt} from '../Prompt';
 describe('Prompt', () => {
     it('displays the title, body and close button', () => {
         render(
-            <Prompt variant="default" opened onClose={jest.fn()} title="title modal">
+            <Prompt variant="default" opened onClose={vi.fn()} title="title modal">
                 content modal
                 <Prompt.Footer>footer content</Prompt.Footer>
             </Prompt>
@@ -16,7 +16,7 @@ describe('Prompt', () => {
     });
 
     it('calls onClose when clicking on the close button', () => {
-        const onClose = jest.fn();
+        const onClose = vi.fn();
         render(
             <Prompt variant="default" opened onClose={onClose} title="title modal">
                 content modal

package/src/components/table/__tests__/Table.spec.tsx

@@ -169,7 +169,7 @@ describe('Table', () => {
 
     it('calls an action when user double clicks on a row', async () => {
         const user = userEvent.setup();
-        const doubleClickSpy = jest.fn();
+        const doubleClickSpy = vi.fn();
         render(
             <Table<RowData>
                 data={[{firstName: 'Mario'}, {firstName: 'Luigi'}]}

package/src/components/table/__tests__/TableActions.spec.tsx

@@ -38,7 +38,7 @@ describe('Table.Actions', () => {
     describe('when multi row selection is enabled', () => {
         it('passes down an array of selected rows', async () => {
             const user = userEvent.setup({delay: null});
-            const renderSpy = jest.fn().mockImplementation(() => <div />);
+            const renderSpy = vi.fn().mockImplementation(() => <div />);
             render(
                 <Table<RowData>
                     data={[{name: 'fruit'}, {name: 'vegetable'}, {name: 'bread'}]}

package/src/components/table/__tests__/TableDateRangePicker.spec.tsx

@@ -11,20 +11,23 @@ const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enabl
 // Since we're mocking the date and the animations are timer based we're mocking useReduceMotion to disable all the animations
 // I tried wrapping the components in <MantineProvider theme={{components: {Transition: {defaultProps: {duration: 0}}}}}>
 // but the animation was still happening. :(
-jest.mock('@mantine/hooks', () => ({
-    ...jest.requireActual('@mantine/hooks'),
-    useReducedMotion: () => true,
-}));
+vi.mock('@mantine/hooks', async () => {
+    const actual = await vi.importActual('@mantine/hooks');
+    return {
+        ...actual,
+        useReduceMotion: () => true,
+    };
+});
 
 describe('Table.DateRangePicker', () => {
-    jest.setTimeout(15000);
+    // vi.setTimeout(15000);
 
     beforeEach(() => {
-        jest.useFakeTimers().setSystemTime(new Date(2022, 0, 15));
+        vi.useFakeTimers().setSystemTime(new Date(2022, 0, 15));
     });
 
     afterEach(() => {
-        jest.useRealTimers();
+        vi.useRealTimers();
     });
 
     it('displays the intial dates', async () => {
@@ -47,7 +50,7 @@ describe('Table.DateRangePicker', () => {
 
     it('displays the selected date range in the table', async () => {
         const user = userEvent.setup({delay: null});
-        const onChange = jest.fn();
+        const onChange = vi.fn();
         render(
             <Table
                 data={[{name: 'fruit'}, {name: 'vegetable'}]}