@coveord/plasma-mantine 56.3.0 → 56.3.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/plasmaCSSVariablesResolver.ts"],"sourcesContent":["import {\n    alpha,\n    ConvertCSSVariablesInput,\n    CSSVariablesResolver,\n    defaultCssVariablesResolver,\n    getPrimaryShade,\n    MantineColor,\n    MantineTheme,\n} from '@mantine/core';\n\nexport const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {\n    // Get the default Mantine CSS variables\n    const mantineVariables = defaultCssVariablesResolver(theme);\n\n    // Define your custom variables\n    const customVariables: ConvertCSSVariablesInput = {\n        variables: {\n            '--coveo-fw-light': '300',\n            '--coveo-fw-normal': '400',\n            '--coveo-fw-bold': '500',\n        },\n        dark: {\n            // custom colors\n            '--coveo-color-title': 'var(--mantine-color-white)',\n            '--coveo-app-background': theme.colors.dark[8],\n            '--coveo-color-input-border': theme.colors.dark[4],\n            '--coveo-color-text-readonly': theme.colors.dark[0],\n            '--coveo-color-bg-readonly': theme.colors.dark[6],\n            '--coveo-color-text-primary': 'var(--mantine-primary-color-4)',\n            '--coveo-color-bg-dark-surface': 'var(--mantine-primary-color-3)',\n\n            // mantine overrides\n            '--mantine-primary-color-light': 'var(--mantine-primary-color-7)',\n            '--mantine-color-body': theme.colors.dark[8],\n            '--mantine-color-default': theme.colors.dark[7],\n            '--mantine-color-default-border': theme.colors.dark[6],\n            '--mantine-color-default-hover': theme.colors.dark[6],\n            '--mantine-color-error': theme.colors.red[4],\n            '--mantine-color-text': theme.colors.dark[0],\n            '--mantine-color-dimmed': theme.colors.dark[1],\n            '--mantine-color-gray-filled': theme.colors.dark[6],\n            '--mantine-color-warning-filled': theme.colors.yellow[2],\n            '--mantine-color-warning-light': theme.colors.yellow[6],\n            '--mantine-color-placeholder': theme.colors.dark[2],\n            '--mantine-color-disabled': theme.colors.dark[7],\n            '--mantine-color-disabled-color': theme.colors.dark[3],\n        },\n        light: {\n            // custom colors\n            '--coveo-app-background': theme.colors.gray[0],\n            '--coveo-color-input-border': theme.colors.gray[3],\n            '--coveo-color-title': theme.colors.gray[8],\n            '--coveo-color-text-readonly': 'var(--mantine-color-text)',\n            '--coveo-color-bg-readonly': theme.colors.gray[1],\n            '--coveo-color-text-primary': 'var(--mantine-primary-color-filled)',\n            '--coveo-color-bg-dark-surface': theme.colors.violet[9],\n\n            // mantine overrides\n            '--mantine-color-body': theme.colors.gray[0],\n            '--mantine-color-default': 'var(--mantine-color-white)',\n            '--mantine-color-default-border': theme.colors.gray[2],\n            '--mantine-color-default-hover': theme.colors.gray[1],\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-warning-filled': theme.colors.yellow[4],\n            '--mantine-color-placeholder': theme.colors.gray[4],\n            '--mantine-color-disabled': alpha(theme.colors.gray[4], 0.1),\n            '--mantine-color-disabled-color': theme.colors.gray[3],\n        },\n    };\n\n    Object.keys(theme.colors).forEach((color) => {\n        Object.assign(\n            customVariables.light,\n            getVariantLightVariables({\n                theme,\n                color,\n                colorScheme: 'light',\n            }),\n        );\n    });\n    // Merge Mantine variables with custom variables\n    const result: ConvertCSSVariablesInput = {\n        variables: {\n            ...mantineVariables.variables,\n            ...customVariables.variables,\n        },\n        dark: {\n            ...mantineVariables.dark,\n            ...customVariables.dark,\n        },\n        light: {\n            ...mantineVariables.light,\n            ...customVariables.light,\n        },\n    };\n\n    return result;\n};\n\ninterface GetColorVariablesInput {\n    theme: MantineTheme;\n    color: MantineColor;\n    colorScheme: 'light' | 'dark';\n}\n\nconst getVariantLightVariables = ({theme, color, colorScheme}: GetColorVariablesInput) => {\n    if (!theme.colors[color]) {\n        return {};\n    }\n\n    if (colorScheme === 'light') {\n        const primaryShade = getPrimaryShade(theme, 'light');\n        return {\n            [`--mantine-color-${color}-light`]: alpha(theme.colors[color][primaryShade], 0.1),\n            [`--mantine-color-${color}-light-hover`]: alpha(theme.colors[color][primaryShade], 0.16),\n        };\n    }\n};\n"],"names":["alpha","defaultCssVariablesResolver","getPrimaryShade","plasmaCSSVariablesResolver","theme","mantineVariables","customVariables","variables","dark","colors","red","yellow","light","gray","violet","Object","keys","forEach","color","assign","getVariantLightVariables","colorScheme","result","primaryShade"],"mappings":"AAAA,SACIA,KAAK,EAGLC,2BAA2B,EAC3BC,eAAe,QAGZ,gBAAgB;AAEvB,OAAO,MAAMC,6BAAmD,CAACC;IAC7D,wCAAwC;IACxC,MAAMC,mBAAmBJ,4BAA4BG;IAErD,+BAA+B;IAC/B,MAAME,kBAA4C;QAC9CC,WAAW;YACP,oBAAoB;YACpB,qBAAqB;YACrB,mBAAmB;QACvB;QACAC,MAAM;YACF,gBAAgB;YAChB,uBAAuB;YACvB,0BAA0BJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YAC9C,8BAA8BJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YAClD,+BAA+BJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YACnD,6BAA6BJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YACjD,8BAA8B;YAC9B,iCAAiC;YAEjC,oBAAoB;YACpB,iCAAiC;YACjC,wBAAwBJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YAC5C,2BAA2BJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YAC/C,kCAAkCJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YACtD,iCAAiCJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YACrD,yBAAyBJ,MAAMK,MAAM,CAACC,GAAG,CAAC,EAAE;YAC5C,wBAAwBN,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YAC5C,0BAA0BJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YAC9C,+BAA+BJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YACnD,kCAAkCJ,MAAMK,MAAM,CAACE,MAAM,CAAC,EAAE;YACxD,iCAAiCP,MAAMK,MAAM,CAACE,MAAM,CAAC,EAAE;YACvD,+BAA+BP,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YACnD,4BAA4BJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;YAChD,kCAAkCJ,MAAMK,MAAM,CAACD,IAAI,CAAC,EAAE;QAC1D;QACAI,OAAO;YACH,gBAAgB;YAChB,0BAA0BR,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YAC9C,8BAA8BT,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YAClD,uBAAuBT,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YAC3C,+BAA+B;YAC/B,6BAA6BT,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YACjD,8BAA8B;YAC9B,iCAAiCT,MAAMK,MAAM,CAACK,MAAM,CAAC,EAAE;YAEvD,oBAAoB;YACpB,wBAAwBV,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YAC5C,2BAA2B;YAC3B,kCAAkCT,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YACtD,iCAAiCT,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YACrD,yBAAyBT,MAAMK,MAAM,CAACC,GAAG,CAAC,EAAE;YAC5C,wBAAwBN,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YAC5C,0BAA0BT,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YAC9C,+BAA+BT,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YACnD,kCAAkCT,MAAMK,MAAM,CAACE,MAAM,CAAC,EAAE;YACxD,+BAA+BP,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;YACnD,4BAA4Bb,MAAMI,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE,EAAE;YACxD,kCAAkCT,MAAMK,MAAM,CAACI,IAAI,CAAC,EAAE;QAC1D;IACJ;IAEAE,OAAOC,IAAI,CAACZ,MAAMK,MAAM,EAAEQ,OAAO,CAAC,CAACC;QAC/BH,OAAOI,MAAM,CACTb,gBAAgBM,KAAK,EACrBQ,yBAAyB;YACrBhB;YACAc;YACAG,aAAa;QACjB;IAER;IACA,gDAAgD;IAChD,MAAMC,SAAmC;QACrCf,WAAW;YACP,GAAGF,iBAAiBE,SAAS;YAC7B,GAAGD,gBAAgBC,SAAS;QAChC;QACAC,MAAM;YACF,GAAGH,iBAAiBG,IAAI;YACxB,GAAGF,gBAAgBE,IAAI;QAC3B;QACAI,OAAO;YACH,GAAGP,iBAAiBO,KAAK;YACzB,GAAGN,gBAAgBM,KAAK;QAC5B;IACJ;IAEA,OAAOU;AACX,EAAE;AAQF,MAAMF,2BAA2B,CAAC,EAAChB,KAAK,EAAEc,KAAK,EAAEG,WAAW,EAAyB;IACjF,IAAI,CAACjB,MAAMK,MAAM,CAACS,MAAM,EAAE;QACtB,OAAO,CAAC;IACZ;IAEA,IAAIG,gBAAgB,SAAS;QACzB,MAAME,eAAerB,gBAAgBE,OAAO;QAC5C,OAAO;YACH,CAAC,CAAC,gBAAgB,EAAEc,MAAM,MAAM,CAAC,CAAC,EAAElB,MAAMI,MAAMK,MAAM,CAACS,MAAM,CAACK,aAAa,EAAE;YAC7E,CAAC,CAAC,gBAAgB,EAAEL,MAAM,YAAY,CAAC,CAAC,EAAElB,MAAMI,MAAMK,MAAM,CAACS,MAAM,CAACK,aAAa,EAAE;QACvF;IACJ;AACJ"}
+{"version":3,"sources":["../../../src/theme/plasmaCSSVariablesResolver.ts"],"sourcesContent":["import {\n    alpha,\n    ConvertCSSVariablesInput,\n    CSSVariablesResolver,\n    defaultCssVariablesResolver,\n    getPrimaryShade,\n    MantineColor,\n    MantineTheme,\n} from '@mantine/core';\n\nexport const plasmaCSSVariablesResolver: CSSVariablesResolver = (theme) => {\n    // Get the default Mantine CSS variables\n    const mantineVariables = defaultCssVariablesResolver(theme);\n\n    // Define your custom variables\n    const customVariables: ConvertCSSVariablesInput = {\n        variables: {\n            '--coveo-fw-light': '300',\n            '--coveo-fw-normal': '400',\n            '--coveo-fw-bold': '500',\n        },\n        dark: {\n            // custom colors\n            '--coveo-color-title': 'var(--mantine-color-white)',\n            '--coveo-app-background': theme.colors.dark[8],\n            '--coveo-color-input-border': theme.colors.dark[4],\n            '--coveo-color-text-readonly': theme.colors.dark[0],\n            '--coveo-color-bg-readonly': theme.colors.dark[6],\n            '--coveo-color-text-primary': 'var(--mantine-primary-color-4)',\n            '--coveo-color-bg-dark-surface': 'var(--mantine-primary-color-3)',\n\n            // mantine overrides\n            '--mantine-primary-color-light': 'var(--mantine-primary-color-7)',\n            '--mantine-color-body': theme.colors.dark[7],\n            '--mantine-color-default': theme.colors.dark[7],\n            '--mantine-color-default-border': theme.colors.dark[6],\n            '--mantine-color-default-hover': theme.colors.dark[6],\n            '--mantine-color-error': theme.colors.red[4],\n            '--mantine-color-text': theme.colors.dark[0],\n            '--mantine-color-dimmed': theme.colors.dark[1],\n            '--mantine-color-gray-filled': theme.colors.dark[6],\n            '--mantine-color-warning-filled': theme.colors.yellow[2],\n            '--mantine-color-warning-light': theme.colors.yellow[6],\n            '--mantine-color-placeholder': theme.colors.dark[2],\n            '--mantine-color-disabled': theme.colors.dark[7],\n            '--mantine-color-disabled-color': theme.colors.dark[3],\n        },\n        light: {\n            // custom colors\n            '--coveo-app-background': theme.colors.gray[0],\n            '--coveo-color-input-border': theme.colors.gray[3],\n            '--coveo-color-title': theme.colors.gray[8],\n            '--coveo-color-text-readonly': 'var(--mantine-color-text)',\n            '--coveo-color-bg-readonly': theme.colors.gray[1],\n            '--coveo-color-text-primary': 'var(--mantine-primary-color-filled)',\n            '--coveo-color-bg-dark-surface': theme.colors.violet[9],\n\n            // mantine overrides\n            '--mantine-color-body': 'var(--mantine-color-white)',\n            '--mantine-color-default': 'var(--mantine-color-white)',\n            '--mantine-color-default-border': theme.colors.gray[2],\n            '--mantine-color-default-hover': theme.colors.gray[1],\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-warning-filled': theme.colors.yellow[4],\n            '--mantine-color-placeholder': theme.colors.gray[4],\n            '--mantine-color-disabled': alpha(theme.colors.gray[4], 0.1),\n            '--mantine-color-disabled-color': theme.colors.gray[3],\n        },\n    };\n\n    Object.keys(theme.colors).forEach((color) => {\n        Object.assign(\n            customVariables.light,\n            getVariantLightVariables({\n                theme,\n                color,\n                colorScheme: 'light',\n            }),\n        );\n    });\n    // Merge Mantine variables with custom variables\n    const result: ConvertCSSVariablesInput = {\n        variables: {\n            ...mantineVariables.variables,\n            ...customVariables.variables,\n        },\n        dark: {\n            ...mantineVariables.dark,\n            ...customVariables.dark,\n        },\n        light: {\n            ...mantineVariables.light,\n            ...customVariables.light,\n        },\n    };\n\n    return result;\n};\n\ninterface GetColorVariablesInput {\n    theme: MantineTheme;\n    color: MantineColor;\n    colorScheme: 'light' | 'dark';\n}\n\nconst getVariantLightVariables = ({theme, color, colorScheme}: GetColorVariablesInput) => {\n    if (!theme.colors[color]) {\n        return {};\n    }\n\n    if (colorScheme === 'light') {\n        const primaryShade = getPrimaryShade(theme, 'light');\n        return {\n            [`--mantine-color-${color}-light`]: alpha(theme.colors[color][primaryShade], 0.1),\n            [`--mantine-color-${color}-light-hover`]: alpha(theme.colors[color][primaryShade], 0.16),\n        };\n    }\n};\n"],"names":["alpha","defaultCssVariablesResolver","getPrimaryShade","plasmaCSSVariablesResolver","theme","mantineVariables","customVariables","variables","dark","colors","red","yellow","light","gray","violet","Object","keys","forEach","color","assign","getVariantLightVariables","colorScheme","result","primaryShade"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "56.3.0",
+  "version": "56.3.2",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -41,8 +41,8 @@
     "fast-deep-equal": "3.1.3",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.54.0",
-    "@coveord/plasma-tokens": "56.3.0",
-    "@coveord/plasma-react-icons": "56.3.0"
+    "@coveord/plasma-react-icons": "56.3.2",
+    "@coveord/plasma-tokens": "56.3.1"
   },
   "devDependencies": {
     "@mantine/carousel": "8.3.5",
@@ -78,7 +78,7 @@
     "rimraf": "6.0.1",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
-    "vitest": "3.2.4"
+    "vitest": "4.0.5"
   },
   "peerDependencies": {
     "@mantine/carousel": "^8.0.2",

package/src/__tests__/Utils.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';
 
 import {Combobox, createTheme, Popover} from '@mantine/core';
-import {Plasmantine} from '../theme/index.js';
+import {Plasmantine} from '../theme/Plasmantine.js';
 
 const testTheme = createTheme({
     components: {

package/src/__tests__/VitestSetup.ts

@@ -24,11 +24,13 @@ Object.defineProperty(window, 'matchMedia', {
 });
 window.ResizeObserver =
     window.ResizeObserver ||
-    vi.fn().mockImplementation(() => ({
-        disconnect: vi.fn(),
-        observe: vi.fn(),
-        unobserve: vi.fn(),
-    }));
+    vi.fn(
+        class ResizeObserverMock {
+            disconnect = vi.fn();
+            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()`

package/src/components/browser-preview/BrowserPreview.tsx

@@ -1,7 +1,7 @@
 import {Flex, Group, Stack, StackProps, Text, Tooltip} from '@mantine/core';
 import cx from 'clsx';
 import {PropsWithChildren} from 'react';
-import {InfoToken} from '../info-token/index.js';
+import {InfoToken} from '../info-token/InfoToken.js';
 import BrowserPreviewClasses from './BrowserPreview.module.css';
 
 export interface BrowserPreviewProps extends StackProps {

package/src/components/button/ButtonWithDisabledTooltip.tsx

@@ -1,7 +1,7 @@
 import {Box, Tooltip, TooltipProps} from '@mantine/core';
 import {ReactNode, forwardRef} from 'react';
 
-import {createPolymorphicComponent} from '../../utils/index.js';
+import {createPolymorphicComponent} from '../../utils/createPolymorphicComponent.js';
 
 export interface ButtonWithDisabledTooltipProps {
     /**

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

@@ -19,11 +19,11 @@ import {MarkerSeverity, editor as monacoEditor} from 'monaco-editor';
 import {FunctionComponent, useEffect, useRef, useState} from 'react';
 
 import cx from 'clsx';
-import {useParentHeight} from '../../hooks/index.js';
-import {CopyToClipboard} from '../copyToClipboard/index.js';
+import {useParentHeight} from '../../hooks/useParentHeight.js';
+import {CopyToClipboard} from '../copyToClipboard/CopyToClipboard.js';
 import CodeEditorClasses from './CodeEditor.module.css';
 import {XML} from './languages/xml.js';
-import {Search} from './search/index.js';
+import {Search} from './search/Search.js';
 interface CodeEditorProps
     extends Omit<
             InputWrapperProps,

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

@@ -1,6 +1,6 @@
 import {IconSearch} from '@coveord/plasma-react-icons';
 import {FunctionComponent} from 'react';
-import {ActionIcon} from '../../action-icon/index.js';
+import {ActionIcon} from '../../action-icon/ActionIcon.js';
 
 export interface SearchProps {
     handleSearch: () => void;

package/src/components/collection/Collection.tsx

@@ -17,8 +17,8 @@ import {
 import {useDidUpdate} from '@mantine/hooks';
 import {ForwardedRef, ReactNode} from 'react';
 
-import {CustomComponentThemeExtend, identity} from '../../utils/index.js';
-import {Button} from '../button/index.js';
+import {CustomComponentThemeExtend, identity} from '../../utils/createFactoryComponent.js';
+import {Button} from '../button/Button.js';
 import classes from './Collection.module.css';
 import {CollectionProvider} from './CollectionContext.js';
 import {CollectionItem} from './CollectionItem.js';

package/src/components/collection/CollectionItem.tsx

@@ -4,7 +4,7 @@ import {CSS} from '@dnd-kit/utilities';
 import {Group, GroupProps, useProps} from '@mantine/core';
 import {FunctionComponent, PropsWithChildren} from 'react';
 
-import {ActionIcon} from '../action-icon/index.js';
+import {ActionIcon} from '../action-icon/ActionIcon.js';
 import {useCollectionContext} from './CollectionContext.js';
 
 interface CollectionItemProps extends CollectionItemSharedProps {

package/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -1,7 +1,7 @@
 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/index.js';
+import {ActionIcon} from '../action-icon/ActionIcon.js';
 
 export interface CopyToClipboardProps extends ActionIconProps {
     /**

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

@@ -3,7 +3,7 @@ import {DatePicker, DatePickerBaseProps, type DateStringValue, type DatesRangeVa
 import {useForm} from '@mantine/form';
 
 import dayjs from 'dayjs';
-import {Button} from '../button/index.js';
+import {Button} from '../button/Button.js';
 import DateRangeClasses from './DateRange.module.css';
 import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect.js';
 import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker.js';

package/src/components/header/Header.module.css

@@ -19,3 +19,7 @@
     margin-left: var(--mantine-spacing-xs);
     vertical-align: middle;
 }
+
+.breadcrumbText {
+    color: var(--coveo-color-title);
+}

package/src/components/header/Header.tsx

@@ -38,7 +38,6 @@ export type HeaderStyleNames =
     | HeaderBreadcrumbsStyleNames
     | HeaderBreadcrumbAnchorStyleNames
     | HeaderBreadcrumbTextStyleNames
-    | HeaderBreadcrumbsStyleNames
     | HeaderRightStyleNames;
 
 export interface HeaderProps

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbAnchor.tsx

@@ -1,10 +1,21 @@
-import {Anchor, type AnchorProps, type PolymorphicFactory, polymorphicFactory} from '@mantine/core';
+import {IconChevronLeft} from '@coveord/plasma-react-icons';
+import {Anchor, type AnchorProps, Flex, type PolymorphicFactory, polymorphicFactory} from '@mantine/core';
+import {ReactNode} from 'react';
 import {useHeaderContext} from '../Header.context.js';
 
-export type HeaderBreadcrumbAnchorStyleNames = 'breadcrumbAnchor';
+export interface HeaderBreadcrumbAnchorProps extends AnchorProps {
+    /**
+     * If true, only one breadcrumb will be displayed with a back arrow
+     * @default false
+     **/
+    single?: boolean;
+    children: ReactNode;
+}
+
+export type HeaderBreadcrumbAnchorStyleNames = 'breadcrumbAnchor' | 'breadcrumbAnchorSingleGroup';
 
 export type HeaderBreadcrumbAnchorFactory = PolymorphicFactory<{
-    props: AnchorProps;
+    props: HeaderBreadcrumbAnchorProps;
     ref: HTMLAnchorElement;
     stylesNames: HeaderBreadcrumbAnchorStyleNames;
     compound: true;
@@ -13,16 +24,30 @@ export type HeaderBreadcrumbAnchorFactory = PolymorphicFactory<{
 }>;
 
 export const HeaderBreadcrumbAnchor = polymorphicFactory<HeaderBreadcrumbAnchorFactory>((props, ref) => {
-    const {className, classNames, styles, style, ...others} = props;
+    const {children, className, classNames, styles, style, single, ...others} = props;
     const ctx = useHeaderContext();
 
+    const content = single ? (
+        <Flex
+            align="center"
+            {...ctx.getStyles('breadcrumbAnchorSingleGroup', {className, classNames, styles, style, props})}
+        >
+            <IconChevronLeft aria-label="arrow pointing back" size={16} />
+            {children}
+        </Flex>
+    ) : (
+        children
+    );
+
     return (
         <Anchor
             ref={ref}
             inherit
             {...ctx.getStyles('breadcrumbAnchor', {className, classNames, styles, style, props})}
             {...others}
-        />
+        >
+            {content}
+        </Anchor>
     );
 });
 HeaderBreadcrumbAnchor.displayName = '@coveo/plasma-mantine/HeaderBreadcrumbAnchor';

package/src/components/header/HeaderBreadcrumbs/HeaderBreadcrumbs.tsx

@@ -7,14 +7,14 @@ export interface HeaderBreadcrumbsProps
         CompoundStylesApiProps<HeaderBreadcrumbsFactory> {}
 
 export type HeaderBreadcrumbsFactory = Factory<{
-    props: BreadcrumbsProps;
+    props: HeaderBreadcrumbsProps;
     ref: HTMLDivElement;
     stylesNames: HeaderBreadcrumbsStyleNames;
     compound: true;
 }>;
 
 export const HeaderBreadcrumbs = factory<HeaderBreadcrumbsFactory>((props, ref) => {
-    const {children, className, classNames, styles, style, ...others} = props;
+    const {children, className, classNames, styles, style, vars: _vars, ...others} = props;
     const ctx = useHeaderContext();
 
     return (

package/src/components/header/HeaderDocAnchor/HeaderDocAnchor.tsx

@@ -10,7 +10,7 @@ import {
 } from '@mantine/core';
 import {ReactNode} from 'react';
 import {useHeaderContext} from '../Header.context.js';
-import {InfoToken} from '../../info-token/index.js';
+import {InfoToken} from '../../info-token/InfoToken.js';
 
 export type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';
 

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

@@ -1,4 +1,3 @@
-import {Anchor} from '@mantine/core';
 import {render, screen, within} from '@test-utils';
 
 import {Header} from '../Header.js';
@@ -32,9 +31,9 @@ describe('Header', () => {
         const {rerender} = render(
             <Header>
                 <Header.Breadcrumbs data-testid="breadcrumbs-after">
-                    <Anchor>One</Anchor>
-                    <Anchor>Two</Anchor>
-                    <Anchor>Three</Anchor>
+                    <Header.BreadcrumbAnchor>One</Header.BreadcrumbAnchor>
+                    <Header.BreadcrumbAnchor>Two</Header.BreadcrumbAnchor>
+                    <Header.BreadcrumbAnchor>Three</Header.BreadcrumbAnchor>
                 </Header.Breadcrumbs>
                 <div data-testid="title">Title</div>
             </Header>,
@@ -49,9 +48,9 @@ describe('Header', () => {
             <Header>
                 <div data-testid="title">Title</div>
                 <Header.Breadcrumbs data-testid="breadcrumbs-after">
-                    <Anchor>One</Anchor>
-                    <Anchor>Two</Anchor>
-                    <Anchor>Three</Anchor>
+                    <Header.BreadcrumbAnchor>One</Header.BreadcrumbAnchor>
+                    <Header.BreadcrumbAnchor>Two</Header.BreadcrumbAnchor>
+                    <Header.BreadcrumbAnchor>Three</Header.BreadcrumbAnchor>
                 </Header.Breadcrumbs>
             </Header>,
         );
@@ -61,6 +60,21 @@ describe('Header', () => {
         );
     });
 
+    it('adds an icon if the single prop is specified on the breadcrumb anchor', async () => {
+        render(
+            <Header>
+                <Header.Breadcrumbs data-testid="breadcrumbs-after">
+                    <Header.BreadcrumbAnchor href="#" single>
+                        One
+                    </Header.BreadcrumbAnchor>
+                </Header.Breadcrumbs>
+                Title
+            </Header>,
+        );
+
+        expect(screen.getByRole('link', {name: 'arrow pointing back One'})).toBeVisible();
+    });
+
     it('renders a doc link icon if a doc anchor is provided', async () => {
         render(
             <Header>

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

@@ -1,6 +1,6 @@
 import {createPolymorphicComponent} from '@mantine/core';
 import {forwardRef, MouseEventHandler} from 'react';
-import {Button, ButtonProps} from '../button/index.js';
+import {Button, type ButtonProps} from '../button/Button.js';
 import {InlineConfirmComponentsProps} from './InlineConfirm.js';
 import {useInlineConfirm} from './InlineConfirmContext.js';
 

package/src/components/menu/Menu.tsx

@@ -1,9 +1,9 @@
 import {Menu as MantineMenu, MenuItemProps as MantineMenuItemProps} from '@mantine/core';
 import {forwardRef} from 'react';
 
-import {createPolymorphicComponent, overrideComponent} from '../../utils/index.js';
-import {ButtonWithDisabledTooltipProps} from '../button/index.js';
-import {ButtonWithDisabledTooltip} from '../button/ButtonWithDisabledTooltip.js';
+import {createPolymorphicComponent} from '../../utils/createPolymorphicComponent.js';
+import {overrideComponent} from '../../utils/overrideComponent.js';
+import {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from '../button/ButtonWithDisabledTooltip.js';
 
 export interface MenuItemProps extends MantineMenuItemProps, ButtonWithDisabledTooltipProps {}
 

package/src/components/modal/Modal.tsx

@@ -4,7 +4,7 @@ import {
     ModalFactory as MantineModalFactory,
     ModalProps as MantineModalProps,
 } from '@mantine/core';
-import {Header, HeaderDocAnchorProps, HeaderProps} from '../header/index.js';
+import {Header, type HeaderDocAnchorProps, type HeaderProps} from '../header/Header.js';
 import {ModalFooter as PlasmaModalFooter} from './ModalFooter.js';
 
 interface PlasmaModalProps extends MantineModalProps {

package/src/components/modal/ModalFooter.tsx

@@ -1,6 +1,6 @@
 import {useRef, useEffect} from 'react';
 import {Factory, factory} from '@mantine/core';
-import {StickyFooter, StickyFooterProps, StickyFooterStylesNames} from '../sticky-footer/index.js';
+import {StickyFooter, type StickyFooterProps, type StickyFooterStylesNames} from '../sticky-footer/StickyFooter.js';
 import classes from './ModalFooter.module.css';
 
 export interface ModalFooterProps extends Omit<StickyFooterProps, 'variant'> {}

package/src/components/prompt/Prompt.tsx

@@ -10,7 +10,7 @@ import {
     useStyles,
 } from '@mantine/core';
 import {Children, ComponentType, ReactElement, ReactNode} from 'react';
-import {Modal} from '../modal/index.js';
+import {Modal} from '../modal/Modal.js';
 import {PromptContextProvider} from './Prompt.context.js';
 import classes from './Prompt.module.css';
 import {PromptCancelButton, PromptCancelButtonStylesNamesVariant} from './PromptCancelButton.js';

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

@@ -5,6 +5,8 @@
 .table {
     width: 100%;
     padding-bottom: var(--mantine-spacing-sm);
+    border-collapse: collapse;
+    border-spacing: 0;
 }
 
 .header {
@@ -67,7 +69,7 @@
 /* Table.Header */
 .headerRoot {
     border-bottom: 1px solid var(--mantine-color-default-border);
-    background-color: var(--mantine-color-body);
+    background-color: var(--coveo-app-background);
     padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
     min-height: 69px;
@@ -103,7 +105,7 @@
         padding-right: var(--mantine-spacing-xl);
     }
 
-    background-color: var(--mantine-color-body);
+    background-color: var(--coveo-app-background);
 
     &[data-control='true'] {
         @mixin hover {

package/src/components/table/Table.tsx

@@ -10,12 +10,13 @@ import {
 } from '@tanstack/react-table';
 import isEqual from 'fast-deep-equal';
 import {Children, ForwardedRef, ReactElement, useEffect, useRef} from 'react';
-import {CustomComponentThemeExtend, identity} from '../../utils/index.js';
+import {CustomComponentThemeExtend, identity} from '../../utils/createFactoryComponent.js';
 import classes from './Table.module.css';
 import {TableLayout, TableProps} from './Table.types.js';
 import {TableProvider} from './TableContext.js';
 import {TableLayouts} from './layouts/TableLayouts.js';
-import {TableActionItem, TableActionItemStylesNames, TableHeaderActionsStylesNames} from './table-actions/index.js';
+import {TableActionItem, TableActionItemStylesNames} from './table-actions/TableActionItem.js';
+import {TableHeaderActionsStylesNames} from './table-actions/TableHeaderActions.js';
 import {TableActionsListStylesNames} from './table-actions/TableActionsList.js';
 import {TableActionsColumn} from './table-column/TableActionsColumn.js';
 import {

package/src/components/table/layouts/row-layout/RowLayout.tsx

@@ -1,7 +1,7 @@
 import {IconList} from '@coveord/plasma-react-icons';
 import {Factory, MantineComponent, StylesApiProps, useProps, useStyles} from '@mantine/core';
 import {ReactNode} from 'react';
-import {identity} from '../../../../utils/index.js';
+import {identity} from '../../../../utils/createFactoryComponent.js';
 import {TableLayout} from '../../Table.types.js';
 import classes from './RowLayout.module.css';
 import {RowLayoutBody, RowLayoutBodyStylesNames} from './RowLayoutBody.js';

package/src/components/table/layouts/row-layout/RowLayoutBody.tsx

@@ -2,7 +2,7 @@ import {Box, BoxProps, Collapse, CompoundStylesApiProps, Factory, useProps} from
 import {flexRender} from '@tanstack/react-table';
 import {defaultColumnSizing} from '@tanstack/table-core';
 import {ForwardedRef, Fragment, type MouseEvent} from 'react';
-import {CustomComponentThemeExtend, identity} from '../../../../utils/index.js';
+import {CustomComponentThemeExtend, identity} from '../../../../utils/createFactoryComponent.js';
 import {TableLayoutProps} from '../../Table.types.js';
 import {useTableContext} from '../../TableContext.js';
 import {TableCollapsibleColumn} from '../../table-column/TableCollapsibleColumn.js';

package/src/components/table/layouts/row-layout/RowLayoutHeader.tsx

@@ -1,6 +1,6 @@
 import {BoxProps, CompoundStylesApiProps, Factory, useProps} from '@mantine/core';
 import {ForwardedRef} from 'react';
-import {CustomComponentThemeExtend, identity} from '../../../../utils/index.js';
+import {CustomComponentThemeExtend, identity} from '../../../../utils/createFactoryComponent.js';
 import {TableLayoutProps} from '../../Table.types.js';
 import {useTableContext} from '../../TableContext.js';
 import {Th} from '../../table-header/Th.js';

package/src/components/table/table-actions/TableActionItem.tsx

@@ -1,9 +1,9 @@
 import {CompoundStylesApiProps, PolymorphicFactory, polymorphicFactory, useProps} from '@mantine/core';
 import {ReactNode} from 'react';
-import {Button, ButtonProps} from '../../button/index.js';
+import {Button, type ButtonProps} from '../../button/Button.js';
 import {useTableContext} from '../TableContext.js';
 import {useTableActionContext} from './TableActionContext.js';
-import {Menu, MenuItemProps} from '../../menu/index.js';
+import {Menu, type MenuItemProps} from '../../menu/Menu.js';
 
 export type TableActionItemStylesNames = 'actionItemRoot';
 

package/src/components/table/table-actions/TableActionsList.tsx

@@ -11,9 +11,9 @@ import {
     useProps,
 } from '@mantine/core';
 import {MouseEventHandler, ReactNode, useState} from 'react';
-import {ActionIcon} from '../../action-icon/index.js';
-import {Button} from '../../button/index.js';
-import {InlineConfirm} from '../../inline-confirm/index.js';
+import {ActionIcon} from '../../action-icon/ActionIcon.js';
+import {Button} from '../../button/Button.js';
+import {InlineConfirm} from '../../inline-confirm/InlineConfirm.js';
 import {TableAction} from '../Table.types.js';
 import {useTableContext} from '../TableContext.js';
 import {TableActionProvider} from './TableActionContext.js';

package/src/components/table/table-column/TableCollapsibleColumn.tsx

@@ -2,7 +2,7 @@ import {IconChevronDown, IconChevronUp} from '@coveord/plasma-react-icons';
 import {Factory, factory, useProps} from '@mantine/core';
 import {CellContext, ColumnDef} from '@tanstack/table-core';
 import {MouseEvent as ReactMouseEvent, ReactNode} from 'react';
-import {ActionIcon, ActionIconProps} from '../../action-icon/index.js';
+import {ActionIcon, type ActionIconProps} from '../../action-icon/ActionIcon.js';
 import {useTableContext} from '../TableContext.js';
 
 export type TableCollapsibleColumnStylesNames = 'collapsibleIcon';

package/src/components/table/table-date-range-picker/TableDateRangePicker.tsx

@@ -7,8 +7,8 @@ import {useState} from 'react';
 import {
     DateRangePickerInlineCalendar,
     DateRangePickerInlineCalendarProps,
-    DateRangePickerPreset,
-} from '../../date-range-picker/index.js';
+} from '../../date-range-picker/DateRangePickerInlineCalendar.js';
+import {DateRangePickerPreset} from '../../date-range-picker/DateRangePickerPresetSelect.js';
 import {TableComponentsOrder} from '../Table.js';
 import {useTableContext} from '../TableContext.js';
 

package/src/components/table/table-filter/TableFilter.tsx

@@ -3,7 +3,7 @@ import {BoxProps, CompoundStylesApiProps, Factory, factory, Grid, TextInput, use
 import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
 import {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';
 
-import {ActionIcon} from '../../action-icon/index.js';
+import {ActionIcon} from '../../action-icon/ActionIcon.js';
 import {TableComponentsOrder} from '../Table.js';
 import {useTableContext} from '../TableContext.js';
 

package/src/components/table/table-header/TableHeader.tsx

@@ -2,10 +2,10 @@ import {CrossSize16Px} from '@coveord/plasma-react-icons';
 import {Box, BoxProps, CompoundStylesApiProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';
 import {ReactNode} from 'react';
 
-import {Button} from '../../button/index.js';
+import {Button} from '../../button/Button.js';
 import {TableLayoutControl} from '../layouts/TableLayoutControl.js';
 import {TableComponentsOrder} from '../Table.js';
-import {TableHeaderActions} from '../table-actions/index.js';
+import {TableHeaderActions} from '../table-actions/TableHeaderActions.js';
 import {useTableContext} from '../TableContext.js';
 
 export type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';

package/src/components/table/table-header/Th.tsx

@@ -2,7 +2,7 @@ import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@cov
 import {BoxProps, CompoundStylesApiProps, Factory, Group, UnstyledButton, useProps} from '@mantine/core';
 import {Header, defaultColumnSizing, flexRender} from '@tanstack/react-table';
 import {AriaAttributes, ComponentType, ForwardedRef, SVGProps} from 'react';
-import {CustomComponentThemeExtend, identity} from '../../../utils/index.js';
+import {CustomComponentThemeExtend, identity} from '../../../utils/createFactoryComponent.js';
 import {useTableContext} from '../TableContext.js';
 
 export type TableThStylesNames = 'th';