@coveord/plasma-mantine 55.7.2-next.2 → 55.7.2-next.21

package/dist/esm/theme/plasmaCSSVariablesResolver.js

@@ -3,8 +3,20 @@ export const plasmaCSSVariablesResolver = (theme)=>{
         variables: {},
         dark: {},
         light: {
+            // custom colors
+            '--coveo-color-input-border': theme.colors.gray[3],
+            '--coveo-color-title': theme.colors.gray[8],
+            '--coveo-color-text-disabled': theme.colors.gray[3],
+            // mantine overrides
             '--mantine-color-default-border': theme.colors.gray[2],
-            '--mantine-color-error': theme.colors.red[5]
+            '--mantine-color-error': theme.colors.red[5],
+            '--mantine-color-text': theme.colors.gray[6],
+            '--mantine-color-dimmed': theme.colors.gray[5],
+            '--mantine-color-gray-filled': theme.colors.gray[4],
+            '--mantine-color-gray-light': theme.colors.gray[0],
+            '--mantine-color-gray-light-hover': theme.colors.gray[1],
+            '--mantine-color-warning-filled': theme.colors.yellow[4],
+            '--mantine-color-placeholder': theme.colors.gray[4]
         }
     };
     return result;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/plasmaCSSVariablesResolver.ts"],"sourcesContent":["import {ConvertCSSVariablesInput, CSSVariablesResolver} from '@mantine/core';\n\nexport const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {\n    const result: ConvertCSSVariablesInput = {\n        variables: {},\n        dark: {},\n        light: {\n            '--mantine-color-default-border': theme.colors.gray[2],\n            '--mantine-color-error': theme.colors.red[5],\n        },\n    };\n    return result;\n};\n"],"names":["plasmaCSSVariablesResolver","theme","result","variables","dark","light","colors","gray","red"],"mappings":"AAEA,OAAO,MAAMA,6BAAmD,CAACC;IAC7D,MAAMC,SAAmC;QACrCC,WAAW,CAAC;QACZC,MAAM,CAAC;QACPC,OAAO;YACH,kCAAkCJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACtD,yBAAyBN,MAAMK,MAAM,CAACE,GAAG,CAAC,EAAE;QAChD;IACJ;IACA,OAAON;AACX,EAAE"}
+{"version":3,"sources":["../../../src/theme/plasmaCSSVariablesResolver.ts"],"sourcesContent":["import {ConvertCSSVariablesInput, CSSVariablesResolver} from '@mantine/core';\n\nexport const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {\n    const result: ConvertCSSVariablesInput = {\n        variables: {},\n        dark: {},\n        light: {\n            // custom colors\n            '--coveo-color-input-border': theme.colors.gray[3],\n            '--coveo-color-title': theme.colors.gray[8],\n            '--coveo-color-text-disabled': theme.colors.gray[3],\n\n            // mantine overrides\n            '--mantine-color-default-border': theme.colors.gray[2],\n            '--mantine-color-error': theme.colors.red[5],\n            '--mantine-color-text': theme.colors.gray[6],\n            '--mantine-color-dimmed': theme.colors.gray[5],\n            '--mantine-color-gray-filled': theme.colors.gray[4],\n            '--mantine-color-gray-light': theme.colors.gray[0],\n            '--mantine-color-gray-light-hover': theme.colors.gray[1],\n            '--mantine-color-warning-filled': theme.colors.yellow[4],\n            '--mantine-color-placeholder': theme.colors.gray[4],\n        },\n    };\n    return result;\n};\n"],"names":["plasmaCSSVariablesResolver","theme","result","variables","dark","light","colors","gray","red","yellow"],"mappings":"AAEA,OAAO,MAAMA,6BAAmD,CAACC;IAC7D,MAAMC,SAAmC;QACrCC,WAAW,CAAC;QACZC,MAAM,CAAC;QACPC,OAAO;YACH,gBAAgB;YAChB,8BAA8BJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAClD,uBAAuBN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAC3C,+BAA+BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAEnD,oBAAoB;YACpB,kCAAkCN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACtD,yBAAyBN,MAAMK,MAAM,CAACE,GAAG,CAAC,EAAE;YAC5C,wBAAwBP,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAC5C,0BAA0BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAC9C,+BAA+BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACnD,8BAA8BN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YAClD,oCAAoCN,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;YACxD,kCAAkCN,MAAMK,MAAM,CAACG,MAAM,CAAC,EAAE;YACxD,+BAA+BR,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QACvD;IACJ;IACA,OAAOL;AACX,EAAE"}

package/dist/esm/utils/createFactoryComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createFactoryComponent.d.ts","sourceRoot":"","sources":["../../../src/utils/createFactoryComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,EAAC,MAAM,eAAe,CAAC;AAErF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,CAAC,KAAG,CAAU,CAAC;AAElD,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,cAAc,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,qBAAqB,CAAC"}
+{"version":3,"file":"createFactoryComponent.d.ts","sourceRoot":"","sources":["../../../src/utils/createFactoryComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,cAAc,EAAE,qBAAqB,EAAC,MAAM,eAAe,CAAC;AAErF,eAAO,MAAM,QAAQ,GAAI,CAAC,EAAE,OAAO,CAAC,KAAG,CAAU,CAAC;AAElD,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,cAAc,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,KAAK,qBAAqB,CAAC"}

package/dist/esm/utils/overrideComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overrideComponent.d.ts","sourceRoot":"","sources":["../../../src/utils/overrideComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAC1B,SAAS,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,EAC3E,gBAAgB,8CAEL,SAAS,cACR,gBAAgB,KAC7B,CAAC,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,GAAG,gBAG5E,CAAC"}
+{"version":3,"file":"overrideComponent.d.ts","sourceRoot":"","sources":["../../../src/utils/overrideComponent.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAC1B,SAAS,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,EAC3E,gBAAgB,GAAG,MAAM,CAAC,MAAM,SAAS,EAAE,KAAK,CAAC,EAEjD,WAAW,SAAS,EACpB,YAAY,gBAAgB,KAC7B,CAAC,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,SAAS,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,GAAG,gBAG5E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "55.7.2-next.2",
+  "version": "55.7.2-next.21",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -32,52 +32,53 @@
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@mantine/utils": "6.0.22",
-    "@monaco-editor/react": "4.6.0",
+    "@monaco-editor/react": "4.7.0",
     "@swc/helpers": "0.5.15",
-    "@tanstack/react-table": "8.20.6",
-    "@tanstack/table-core": "8.20.5",
+    "@tanstack/react-table": "8.21.2",
+    "@tanstack/table-core": "8.21.2",
     "clsx": "2.1.1",
     "dayjs": "1.11.13",
     "fast-deep-equal": "3.1.3",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.52.2",
-    "@coveord/plasma-react-icons": "55.7.2-next.0",
-    "@coveord/plasma-tokens": "55.7.2-next.0"
+    "@coveord/plasma-tokens": "55.7.2-next.14",
+    "@coveord/plasma-react-icons": "55.7.2-next.15"
   },
   "devDependencies": {
-    "@mantine/carousel": "7.16.1",
-    "@mantine/code-highlight": "7.16.1",
-    "@mantine/core": "7.16.1",
-    "@mantine/dates": "7.16.1",
-    "@mantine/form": "7.16.1",
-    "@mantine/hooks": "7.16.1",
-    "@mantine/modals": "7.16.1",
-    "@mantine/notifications": "7.16.1",
+    "@mantine/carousel": "7.17.3",
+    "@mantine/code-highlight": "7.17.3",
+    "@mantine/core": "7.17.3",
+    "@mantine/dates": "7.17.3",
+    "@mantine/form": "7.17.3",
+    "@mantine/hooks": "7.17.3",
+    "@mantine/modals": "7.17.3",
+    "@mantine/notifications": "7.17.3",
     "@swc/cli": "0.6.0",
-    "@swc/core": "1.10.8",
+    "@swc/core": "1.11.16",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
-    "@testing-library/user-event": "14.6.0",
+    "@testing-library/user-event": "14.6.1",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.defaultsdeep": "4.6.9",
-    "@types/react": "18.3.18",
+    "@types/react": "18.3.20",
     "@types/react-dom": "18.3.5",
+    "cross-env": "7.0.3",
     "embla-carousel-react": "7.1.0",
     "identity-obj-proxy": "3.0.0",
     "jsdom": "26.0.0",
-    "postcss": "8.5.1",
+    "postcss": "8.5.3",
     "postcss-preset-mantine": "^1.11.0",
     "postcss-simple-vars": "^7.0.1",
-    "publint": "0.3.2",
+    "publint": "0.3.9",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "sass": "1.83.4",
+    "sass": "1.86.1",
     "tslib": "2.8.1",
-    "typescript": "5.7.3",
-    "vitest": "3.0.5"
+    "typescript": "5.8.2",
+    "vitest": "3.1.1"
   },
   "peerDependencies": {
     "@mantine/carousel": "^7.6.1",
@@ -120,7 +121,7 @@
     "clean": "rimraf dist",
     "lintfix": "../../node_modules/.bin/prettier --write \"**/*.{scss,ts,tsx,js,jsx,json,md,yml,html}\" && ../../node_modules/.bin/eslint \"**/*.{ts,tsx}\" --fix",
     "start": "node ../../scripts/start",
-    "test": "TZ=UTC vitest run",
-    "test:watch": "TZ=UTC vitest"
+    "test": "cross-env TZ=UTC vitest run",
+    "test:watch": "cross-env TZ=UTC vitest"
   }
 }

package/src/__tests__/VitestSetup.ts

@@ -29,6 +29,7 @@ window.ResizeObserver =
         observe: vi.fn(),
         unobserve: vi.fn(),
     }));
+document.queryCommandSupported = document.queryCommandSupported || vi.fn().mockReturnValue(true);
 
 // Temporarily workaround for bug in @testing-library/react when use user-event with `vi.useFakeTimers()`
 beforeAll(() => {

package/src/components/accordion/Accordion.module.css

@@ -0,0 +1,3 @@
+.disabled {
+    pointer-events: none;
+}

package/src/components/accordion/Accordion.tsx

@@ -0,0 +1,22 @@
+import {Accordion, type AccordionControlProps, type MantineComponent} from '@mantine/core';
+import classes from './Accordion.module.css';
+
+export const DisabledControl = Accordion.Control.withProps({
+    chevron: <></>,
+    className: classes.disabled,
+}) as MantineComponent<{
+    props: Omit<AccordionControlProps, 'disabled' | 'chevron'>;
+    ref: HTMLButtonElement;
+    compound: true;
+}>;
+
+// Add the new static component to the Accordion component
+declare module '@mantine/core' {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    namespace Accordion {
+        let ControlDisabled: typeof DisabledControl;
+    }
+}
+
+Accordion.ControlDisabled = DisabledControl;
+export {Accordion};

package/src/components/accordion/index.ts

@@ -0,0 +1 @@
+export {Accordion} from './Accordion';

package/src/components/action-icon/ActionIcon.tsx

@@ -26,6 +26,14 @@ type ActionIconOverloadFactory = Factory<{
     variant: ActionIconVariant;
     staticComponents: {
         Group: typeof ActionIconGroup;
+        Primary: typeof ActionIconPrimary;
+        Secondary: typeof ActionIconSecondary;
+        Tertiary: typeof ActionIconTertiary;
+        Quaternary: typeof ActionIconQuaternary;
+        DestructivePrimary: typeof ActionIconDestructive;
+        DestructiveSecondary: typeof ActionIconDestructiveSecondary;
+        DestructiveTertiary: typeof ActionIconDestructiveTertiary;
+        DestructiveQuaternary: typeof ActionIconDestructiveQuaternary;
     };
 }>;
 
@@ -51,4 +59,29 @@ export const ActionIcon = polymorphicFactory<ActionIconOverloadFactory>(
         );
     },
 );
+
+const ActionIconPrimary = ActionIcon.withProps({variant: 'filled'});
+const ActionIconSecondary = ActionIcon.withProps({variant: 'light'});
+const ActionIconTertiary = ActionIcon.withProps({
+    variant: 'default',
+    vars: () => ({root: {'--ai-color': 'var(--mantine-primary-color-filled)'}}),
+});
+const ActionIconQuaternary = ActionIcon.withProps({variant: 'subtle'});
+
+const ActionIconDestructive = ActionIcon.withProps({variant: 'filled', color: 'var(--mantine-color-error)'});
+const ActionIconDestructiveSecondary = ActionIcon.withProps({variant: 'light', color: 'var(--mantine-color-error)'});
+const ActionIconDestructiveTertiary = ActionIcon.withProps({
+    variant: 'default',
+    vars: () => ({root: {'--ai-color': 'var(--mantine-color-error)'}}),
+});
+const ActionIconDestructiveQuaternary = ActionIcon.withProps({variant: 'subtle', color: 'var(--mantine-color-error)'});
+
 ActionIcon.Group = MantineActionIcon.Group;
+ActionIcon.Primary = ActionIconPrimary;
+ActionIcon.Secondary = ActionIconSecondary;
+ActionIcon.Tertiary = ActionIconTertiary;
+ActionIcon.Quaternary = ActionIconQuaternary;
+ActionIcon.DestructivePrimary = ActionIconDestructive;
+ActionIcon.DestructiveSecondary = ActionIconDestructiveSecondary;
+ActionIcon.DestructiveTertiary = ActionIconDestructiveTertiary;
+ActionIcon.DestructiveQuaternary = ActionIconDestructiveQuaternary;

package/src/components/alert/Alert.tsx

@@ -1,7 +1,49 @@
-import {CheckmarkSize16Px, CriticalSize16Px, TipSize16Px, WarningSize16Px} from '@coveord/plasma-react-icons';
 import {Alert} from '@mantine/core';
+import {InfoToken} from '../info-token/InfoToken';
 
-export const AlertTip = Alert.withProps({color: 'gray', icon: <TipSize16Px height={16} />});
-export const AlertSuccess = Alert.withProps({color: 'success', icon: <CheckmarkSize16Px height={16} />});
-export const AlertWarning = Alert.withProps({color: 'warning', icon: <WarningSize16Px height={16} />});
-export const AlertCritical = Alert.withProps({color: 'critical', icon: <CriticalSize16Px height={16} />});
+export const AlertInformation = Alert.withProps({
+    color: 'gray',
+    icon: <InfoToken variant="information" />,
+    vars: () => ({
+        root: {
+            '--alert-color': 'var(--mantine-color-text)',
+            '--alert-bg': 'var(--mantine-color-gray-light)',
+        },
+    }),
+});
+/**
+ * @deprecated use AlertInformation instead
+ */
+export const AlertTip = AlertInformation;
+export const AlertAdvice = Alert.withProps({
+    icon: <InfoToken variant="advice" />,
+    vars: () => ({
+        root: {
+            '--alert-color': 'var(--mantine-primary-color-filled)',
+            '--alert-bg': 'var(--mantine-primary-color-light)',
+        },
+    }),
+});
+/**
+ * @deprecated use AlertAdvice instead
+ */
+export const AlertSuccess = AlertAdvice;
+export const AlertWarning = Alert.withProps({
+    color: 'warning',
+    icon: <InfoToken variant="warning" />,
+    vars: () => ({
+        root: {
+            '--alert-color': 'var(--mantine-color-warning-filled)',
+            '--alert-bg': 'var(--mantine-color-warning-light)',
+        },
+    }),
+});
+export const AlertCritical = Alert.withProps({
+    icon: <InfoToken variant="error" />,
+    vars: () => ({
+        root: {
+            '--alert-color': 'var(--mantine-color-error)',
+            '--alert-bg': 'var(--mantine-color-red-light)',
+        },
+    }),
+});

package/src/components/button/Button.tsx

@@ -26,6 +26,14 @@ type ButtonOverloadFactory = Factory<{
     variant: ButtonVariant;
     staticComponents: {
         Group: typeof ButtonGroup;
+        Primary: typeof ButtonPrimary;
+        Secondary: typeof ButtonSecondary;
+        Tertiary: typeof ButtonTertiary;
+        Quaternary: typeof ButtonQuaternary;
+        DestructivePrimary: typeof ButtonDestructive;
+        DestructiveSecondary: typeof ButtonDestructiveSecondary;
+        DestructiveTertiary: typeof ButtonDestructiveTertiary;
+        DestructiveQuaternary: typeof ButtonDestructiveQuaternary;
     };
 }>;
 
@@ -55,10 +63,28 @@ export const Button = polymorphicFactory<ButtonOverloadFactory>(
         );
     },
 );
-Button.Group = MantineButton.Group;
+const ButtonPrimary = Button.withProps({variant: 'filled'});
+const ButtonSecondary = Button.withProps({variant: 'light'});
+const ButtonTertiary = Button.withProps({
+    variant: 'default',
+    vars: () => ({root: {'--button-color': 'var(--mantine-primary-color-filled)'}}),
+});
+const ButtonQuaternary = Button.withProps({variant: 'subtle'});
+
+const ButtonDestructive = Button.withProps({variant: 'filled', color: 'var(--mantine-color-error)'});
+const ButtonDestructiveSecondary = Button.withProps({variant: 'light', color: 'var(--mantine-color-error)'});
+const ButtonDestructiveTertiary = Button.withProps({
+    variant: 'default',
+    vars: () => ({root: {'--button-color': 'var(--mantine-color-error)'}}),
+});
+const ButtonDestructiveQuaternary = Button.withProps({variant: 'subtle', color: 'var(--mantine-color-error)'});
 
-export const ButtonPrimary = Button.withProps({variant: 'filled'});
-export const ButtonSecondary = Button.withProps({variant: 'light'});
-export const ButtonTertiary = Button.withProps({variant: 'subtle'});
-export const ButtonDestructive = Button.withProps({variant: 'filled', color: 'var(--mantine-color-error)'});
-export const ButtonDestructiveSecondary = Button.withProps({variant: 'light', color: 'var(--mantine-color-error)'});
+Button.Group = MantineButton.Group;
+Button.Primary = ButtonPrimary;
+Button.Secondary = ButtonSecondary;
+Button.Tertiary = ButtonTertiary;
+Button.Quaternary = ButtonQuaternary;
+Button.DestructivePrimary = ButtonDestructive;
+Button.DestructiveSecondary = ButtonDestructiveSecondary;
+Button.DestructiveTertiary = ButtonDestructiveTertiary;
+Button.DestructiveQuaternary = ButtonDestructiveQuaternary;

package/src/components/child-form/ChildForm.module.css

@@ -1,7 +1,7 @@
 .paper {
-    border: 1px solid var(--mantine-color-gray-3);
+    border: 1px solid var(--mantine-color-default-border);
     border-radius: var(--mantine-radius-default);
     box-shadow:
-        0 1px 0 -1px var(--mantine-color-gray-3) inset,
+        0 1px 0 -1px var(--mantine-color-default-border) inset,
         0 4px 2px -2px rgb(55 55 55 / 3%) inset;
 }

package/src/components/code-editor/CodeEditor.module.css

@@ -1,5 +1,5 @@
 .editor {
-    border: 1px solid var(--mantine-color-gray-3);
+    border: 1px solid var(--mantine-color-default-border);
     border-radius: var(--mantine-radius-default);
     z-index: 1;
     height: 100%;

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

@@ -15,7 +15,7 @@ import {
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
 import Editor, {Monaco, loader} from '@monaco-editor/react';
-import {editor as monacoEditor} from 'monaco-editor';
+import {MarkerSeverity, editor as monacoEditor} from 'monaco-editor';
 import {FunctionComponent, useEffect, useRef, useState} from 'react';
 
 import cx from 'clsx';
@@ -48,6 +48,8 @@ interface CodeEditorProps
     onCopy?(): void;
     /** Called whenever the code editor gets the focus */
     onFocus?(): void;
+    /** Ref object that provides access to the editor's functionality */
+    editorHandle?: React.MutableRefObject<monacoEditor.IStandaloneCodeEditor | null>;
     /**
      * The minimal height of the CodeEditor (label and description included)
      *
@@ -108,6 +110,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         disabled,
         monacoLoader,
         options: {tabSize} = {tabSize: 2},
+        editorHandle,
         ...others
     } = useProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
@@ -119,6 +122,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     });
     const [parentHeight, ref] = useParentHeight();
     const editorRef = useRef(null);
+
     const loadLocalMonaco = async () => {
         const monacoInstance = await import('monaco-editor');
         loader.config({monaco: monacoInstance});
@@ -159,6 +163,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     };
 
     const [hasMonacoError, setHasMonacoError] = useState(false);
+    const hasMonacoErrorRef = useRef(false);
+
+    hasMonacoErrorRef.current = hasMonacoError;
+
     const renderErrorOutline = !!error || hasMonacoError;
     const theme = useMantineTheme();
     const {colorScheme} = useMantineColorScheme();
@@ -172,9 +180,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     }, []);
 
     const handleValidate = (markers: monacoEditor.IMarker[]) => {
-        setHasMonacoError(
-            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),
-        );
+        setHasMonacoError(markers.some((marker) => marker.severity === MarkerSeverity.Error));
     };
 
     const _label = label ? (
@@ -243,11 +249,19 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                 onChange={handleChange}
                 onMount={(editor, monaco) => {
                     editorRef.current = editor;
+                    if (editorHandle) {
+                        editorHandle.current = editor;
+                    }
                     registerLanguages(monaco);
                     registerThemes(monaco);
                     editor.onDidFocusEditorText(() => onFocus?.());
                     editor.onDidBlurEditorText(async () => {
-                        await editor.getAction('editor.action.formatDocument').run();
+                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that
+                        setTimeout(async () => {
+                            if (!hasMonacoErrorRef.current) {
+                                await editor?.getAction('editor.action.formatDocument')?.run();
+                            }
+                        }, 550);
                     });
                 }}
             />

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

@@ -1,6 +1,8 @@
 import {useForm} from '@mantine/form';
 import {loader} from '@monaco-editor/react';
 import {render, screen, userEvent, waitForElementToBeRemoved} from '@test-utils';
+import type {editor} from 'monaco-editor';
+import {useRef} from 'react';
 import {CodeEditor} from '../CodeEditor';
 import {XML} from '../languages/xml';
 
@@ -88,4 +90,18 @@ describe('CodeEditor', () => {
 
         expect(onSearchSpy).toHaveBeenCalledTimes(1);
     });
+
+    it('defines editorHandle on mount', async () => {
+        let editorHandle: React.MutableRefObject<editor.IStandaloneCodeEditor> = null;
+        const EditorWrapper = () => {
+            editorHandle = useRef<editor.IStandaloneCodeEditor | null>(null);
+            return <CodeEditor editorHandle={editorHandle} />;
+        };
+
+        render(<EditorWrapper />);
+
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
+
+        expect(editorHandle.current).not.toBeNull();
+    });
 });

package/src/components/code-editor/search/Search.tsx

@@ -1,14 +1,15 @@
-import {SearchSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon} from '@mantine/core';
+import {IconSearch} from '@coveord/plasma-react-icons';
+import {FunctionComponent} from 'react';
+import {ActionIcon} from '../../action-icon';
 
 export interface SearchProps {
     handleSearch: () => void;
 }
 
-const SearchButton: React.FunctionComponent<SearchProps> = ({handleSearch}) => (
-    <ActionIcon onClick={handleSearch} variant="subtle" color="gray">
-        <SearchSize16Px height={16}></SearchSize16Px>
-    </ActionIcon>
+const SearchButton: FunctionComponent<SearchProps> = ({handleSearch}) => (
+    <ActionIcon.Quaternary onClick={handleSearch}>
+        <IconSearch aria-label="Search" size={20} />
+    </ActionIcon.Quaternary>
 );
 
-export const Search: React.FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;
+export const Search: FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;

package/src/components/collection/Collection.tsx

@@ -1,18 +1,16 @@
-import {AddSize16Px} from '@coveord/plasma-react-icons';
+import {IconCirclePlus} from '@coveord/plasma-react-icons';
 import {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';
 import {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';
 import {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';
 import {
+    __InputWrapperProps,
     Box,
     BoxProps,
     Factory,
-    Group,
     Input,
     MantineSpacing,
     Stack,
     StylesApiProps,
-    Tooltip,
-    __InputWrapperProps,
     useProps,
     useStyles,
 } from '@mantine/core';
@@ -253,20 +251,14 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
     const addAllowed = allowAdd?.(value) ?? true;
 
     const _addButton = canEdit ? (
-        <Group>
-            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>
-                <Box>
-                    <Button
-                        variant="subtle"
-                        leftSection={<AddSize16Px height={16} />}
-                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}
-                        disabled={!addAllowed}
-                    >
-                        {addLabel}
-                    </Button>
-                </Box>
-            </Tooltip>
-        </Group>
+        <Button.Quaternary
+            leftSection={<IconCirclePlus size={16} />}
+            onClick={() => onInsertItem(newItem, value?.length ?? 0)}
+            disabled={!addAllowed}
+            disabledTooltip={addDisabledTooltip}
+        >
+            {addLabel}
+        </Button.Quaternary>
     ) : null;
 
     const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);

package/src/components/collection/CollectionItem.tsx

@@ -1,9 +1,10 @@
-import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';
+import {DragAndDropSize24Px, IconCircleMinus} from '@coveord/plasma-react-icons';
 import {useSortable} from '@dnd-kit/sortable';
 import {CSS} from '@dnd-kit/utilities';
-import {ActionIcon, Group, GroupProps} from '@mantine/core';
+import {Group, GroupProps} from '@mantine/core';
 import {FunctionComponent, PropsWithChildren} from 'react';
 
+import {ActionIcon} from '../action-icon';
 import {useCollectionContext} from './CollectionContext';
 
 interface CollectionItemProps extends CollectionItemSharedProps {
@@ -20,9 +21,9 @@ interface CollectionItemSharedProps extends GroupProps {
 const RemoveButton: FunctionComponent<{
     onClick: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({onClick}) => (
-    <ActionIcon style={{alignSelf: 'center'}} variant="subtle" onClick={onClick}>
-        <RemoveSize16Px height={16} />
-    </ActionIcon>
+    <ActionIcon.Quaternary style={{alignSelf: 'center'}} onClick={onClick}>
+        <IconCircleMinus aria-label="Remove" size={20} />
+    </ActionIcon.Quaternary>
 );
 
 const RemoveButtonPlaceholder = () => <div style={{width: 28}} />;

package/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -1,8 +1,9 @@
-import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {IconClipboardCheck, IconClipboardText} from '@coveord/plasma-react-icons';
+import {ActionIconProps, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';
+import {FunctionComponent, MouseEventHandler} from 'react';
+import {ActionIcon} from '../action-icon';
 
-export interface CopyToClipboardProps {
+export interface CopyToClipboardProps extends ActionIconProps {
     /**
      * The value to be copied to the clipboard.
      */
@@ -16,29 +17,49 @@ export interface CopyToClipboardProps {
     /**
      * Called each time the value is copied to the clipboard
      */
-    onCopy?: () => void;
+    onCopy?: MouseEventHandler<HTMLButtonElement>;
     /**
      * The color of the icon when idle
      *
      * @default 'gray'
      */
     color?: MantineColor | (string & {});
+    /**
+     * The text displayed when hovering over the button
+     *
+     * @default 'Copy to clipboard'
+     */
+    tooltipLabelCopy?: string;
+    /**
+     * The text displayed when the value is copied to the clipboard
+     *
+     * @default 'Copied'
+     */
+    tooltipLabelCopied?: string;
 }
 
-const CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy, color}) => (
+const CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({
+    value,
+    onCopy,
+    color,
+    tooltipLabelCopy = 'Copy to clipboard',
+    tooltipLabelCopied = 'Copied',
+    ...others
+}) => (
     <CopyButton value={value} timeout={2000}>
         {({copied, copy}) => (
-            <Tooltip label={copied ? 'Copied' : 'Copy'}>
-                <ActionIcon
-                    variant="subtle"
+            <Tooltip label={copied ? tooltipLabelCopied : tooltipLabelCopy}>
+                <ActionIcon.Quaternary
+                    aria-label={tooltipLabelCopy}
                     color={copied ? 'success' : color}
-                    onClick={() => {
+                    onClick={(clickEvent) => {
                         copy();
-                        onCopy?.();
+                        onCopy?.(clickEvent);
                     }}
+                    {...others}
                 >
-                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}
-                </ActionIcon>
+                    {copied ? <IconClipboardCheck size={20} /> : <IconClipboardText size={20} />}
+                </ActionIcon.Quaternary>
             </Tooltip>
         )}
     </CopyButton>

package/src/components/date-range-picker/DateRange.module.css

@@ -1,7 +1,7 @@
 .picker {
-    border-bottom: 1px solid var(--mantine-color-gray-2);
+    border-bottom: 1px solid var(--mantine-color-default-border);
 }
 
 .save {
-    border-top: 1px solid var(--mantine-color-gray-2);
+    border-top: 1px solid var(--mantine-color-default-border);
 }