@coveord/plasma-mantine 55.7.3 → 55.8.2

package/src/components/loader/CircleLoader.module.css

@@ -0,0 +1,29 @@
+.root {
+    --loader-light-color: var(--mantine-primary-color-light);
+
+    display: inline-block;
+    width: var(--loader-size);
+    height: var(--loader-size);
+
+    &::after {
+        content: '';
+        display: block;
+        width: var(--loader-size);
+        height: var(--loader-size);
+        border-radius: 10000px;
+        border-width: calc(var(--loader-size) / 8);
+        border-style: solid;
+        border-color: var(--loader-light-color) var(--loader-light-color) var(--loader-light-color) var(--loader-color);
+        animation: circle-loader-animation 1.2s linear infinite;
+    }
+}
+
+@keyframes circle-loader-animation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/components/loader/CircleLoader.tsx

@@ -0,0 +1,8 @@
+import {Box, MantineLoaderComponent} from '@mantine/core';
+import cx from 'clsx';
+import {forwardRef} from 'react';
+import classes from './CircleLoader.module.css';
+
+export const CircleLoader: MantineLoaderComponent = forwardRef(({className, ...others}, ref) => (
+    <Box component="span" className={cx(classes.root, className)} {...others} ref={ref} />
+));

package/src/components/loader/index.ts

@@ -0,0 +1 @@
+export * from './CircleLoader';

package/src/components/menu/Menu.tsx

@@ -14,7 +14,13 @@ const _MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(
             disabledTooltip={disabledTooltip}
             disabledTooltipProps={disabledTooltipProps}
         >
-            <MantineMenu.Item ref={ref} disabled={disabled} {...others} />
+            <MantineMenu.Item
+                ref={ref}
+                disabled={disabled}
+                data-disabled={disabled}
+                {...others}
+                {...(disabled && (others as any).href ? {href: undefined} : {})}
+            />
         </ButtonWithDisabledTooltip>
     ),
 );

package/src/components/menu/__tests__/Menu.spec.tsx

@@ -0,0 +1,18 @@
+import {render, screen} from '../../../__tests__/Utils';
+import {Menu} from '../Menu';
+
+describe('Menu', () => {
+    it('prevents navigating to the specified link when disabled', async () => {
+        render(
+            <Menu opened>
+                <Menu.Item component="a" href="https://coveo.com" disabled>
+                    Disabled Item
+                </Menu.Item>
+            </Menu>,
+        );
+        const disabledItem = screen.getByRole('menuitem', {name: 'Disabled Item'});
+        expect(disabledItem).toBeInTheDocument();
+        expect(disabledItem).toHaveAttribute('data-disabled', 'true');
+        expect(disabledItem).not.toHaveAttribute('href');
+    });
+});

package/src/components/modal/Modal.tsx

@@ -4,18 +4,41 @@ import {
     ModalFactory as MantineModalFactory,
     ModalProps as MantineModalProps,
 } from '@mantine/core';
+import {Header, HeaderDocAnchorProps, HeaderProps} from '../header';
 import {ModalFooter as PlasmaModalFooter} from './ModalFooter';
 
+interface PlasmaModalProps extends MantineModalProps {
+    /**
+     * Description of the modal, displayed below the title.
+     */
+    description?: HeaderProps['description'];
+    /**
+     * Help link for the modal, displayed in the header.
+     * Usually provides a link to external documentation or help resources.
+     */
+    help?: HeaderDocAnchorProps;
+}
+
 // Need to redeclare the factory to override and add footer to the props type
 type PlasmaModalFactory = Omit<MantineModalFactory, 'staticComponents'> & {
+    props: PlasmaModalProps;
     staticComponents: MantineModalFactory['staticComponents'] & {
         Footer: typeof PlasmaModalFooter;
     };
 };
 
-const PlasmaModal = factory<PlasmaModalFactory>((props: MantineModalProps, ref) => (
-    <MantineModal ref={ref} {...props} />
-));
+const PlasmaModal = factory<PlasmaModalFactory>(({title, description, help, ...otherProps}, ref) => {
+    const header =
+        typeof title === 'string' ? (
+            <Header titleComponent="div" variant="secondary" description={description}>
+                {title}
+                {help && <Header.DocAnchor {...help} />}
+            </Header>
+        ) : (
+            title
+        );
+    return <MantineModal ref={ref} title={header} {...otherProps} />;
+});
 
 PlasmaModal.displayName = '@coveord/plasma-mantine/Modal';
 PlasmaModal.Root = MantineModal.Root;
@@ -29,5 +52,6 @@ PlasmaModal.Stack = MantineModal.Stack;
 PlasmaModal.Footer = PlasmaModalFooter;
 
 export const Modal = PlasmaModal;
+export type ModalProps = PlasmaModalProps;
 
 export type ModalFactory = PlasmaModalFactory;

package/src/components/modal/ModalFooter.module.css

@@ -0,0 +1,10 @@
+:global(.mantine-Modal-body) {
+    .root {
+        margin: calc(-1 * var(--mb-padding));
+        margin-top: 0;
+    }
+}
+
+.root {
+    padding: var(--mb-padding, var(--mantine-spacing-lg, 32px));
+}

package/src/components/modal/ModalFooter.tsx

@@ -1,15 +1,9 @@
 import {useRef, useEffect} from 'react';
-import clsx from 'clsx';
 import {Factory, factory} from '@mantine/core';
 import {StickyFooter, StickyFooterProps, StickyFooterStylesNames} from '../sticky-footer';
-import classes from './Modal.module.css';
+import classes from './ModalFooter.module.css';
 
-export interface ModalFooterProps extends Omit<StickyFooterProps, 'variant'> {
-    /**
-     * If the footer is sticky, its margin will be adjusted to counteract the padding of the Modal.Body, ensuring the footer visually sticks to the bottom of the modal.
-     */
-    sticky?: boolean;
-}
+export interface ModalFooterProps extends Omit<StickyFooterProps, 'variant'> {}
 
 export type ModalFooterStylesNames = StickyFooterStylesNames;
 
@@ -24,7 +18,7 @@ const ensuresFooterHasEvenHeight = (footer: HTMLElement) => {
     footer.style.height = `${footer.offsetHeight - remainder + 2}px`;
 };
 
-export const ModalFooter = factory<ModalFooterFactory>(({sticky, ...props}, ref) => {
+export const ModalFooter = factory<ModalFooterFactory>((props, ref) => {
     const _ref = useRef<HTMLDivElement>();
 
     const footerRef = ref || _ref;
@@ -37,11 +31,5 @@ export const ModalFooter = factory<ModalFooterFactory>(({sticky, ...props}, ref)
         // if ref === 'function', this is a callback ref. Haven't found any solution for adjusting the height in this case
     }, [ref, props.h]);
 
-    return (
-        <StickyFooter
-            className={clsx(classes.footer, {[classes.modalFooterSticky]: !!sticky})}
-            ref={footerRef}
-            {...props}
-        />
-    );
+    return <StickyFooter className={classes.root} ref={footerRef} {...props} />;
 });

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

@@ -7,7 +7,7 @@ describe('Modal', () => {
     it('renders footer', () => {
         render(
             <Modal opened={true} onClose={vi.fn()}>
-                <Modal.Footer sticky>im the footer</Modal.Footer>
+                <Modal.Footer>im the footer</Modal.Footer>
             </Modal>,
         );
 

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

@@ -12,16 +12,6 @@ describe('ModalFooter', () => {
 
         expect(screen.getByText('im the children')).toBeInTheDocument();
     });
-    it('includes the .modalFooterSticky class styling if set to sticky', () => {
-        render(
-            <Modal.Footer sticky>
-                <div>im the children</div>
-            </Modal.Footer>,
-        );
-
-        const footer = screen.getByText('im the children').parentElement;
-        expect(footer.className).contains('modalFooterSticky');
-    });
     it('has an even height value to ensure the footer sticks completely to the bottom as a workaround to the footer positioning issue when height value is odd', () => {
         render(
             <Modal.Footer h={99}>

package/src/components/prompt/Prompt.module.css

@@ -1,15 +1,9 @@
 .root {
-    --prompt-icon-size: 88px;
-
-    .header {
-        border-bottom: none;
-        align-items: center;
-    }
+    --prompt-icon-size: 32px;
+}
 
-    .body {
-        padding: 0 var(--mantine-spacing-lg) var(--mantine-spacing-lg)
-            calc(var(--prompt-icon-size) + (2 * var(--mantine-spacing-lg)));
-    }
+.body {
+    padding-left: calc(var(--prompt-icon-size) + var(--mantine-spacing-sm) + var(--mb-padding));
 }
 
 .icon {
@@ -18,18 +12,9 @@
 }
 
 .header {
-    gap: var(--mantine-spacing-lg);
-    width: 100%;
-    font-size: var(--mantine-h3-font-size);
-    line-height: var(--mantine-h3-line-height);
-    overflow-wrap: anywhere;
-    padding: var(--mantine-spacing-lg) var(--mantine-spacing-md) var(--mantine-spacing-xs) var(--mantine-spacing-lg);
-}
-
-.close {
-    align-self: flex-start;
+    gap: var(--mantine-spacing-sm);
 }
 
 .inner {
-    color: var(--mantine-color-gray-7);
+    color: var(--mantine-color-dimmed);
 }

package/src/components/prompt/Prompt.tsx

@@ -1,30 +1,29 @@
 import {
     Box,
-    createVarsResolver,
     factory,
     Factory,
-    Image,
     ModalRootProps,
     ModalStylesNames,
     StylesApiProps,
+    Title,
     useProps,
     useStyles,
 } from '@mantine/core';
-import {Children, ReactElement, ReactNode} from 'react';
+import {Children, ComponentType, ReactElement, ReactNode} from 'react';
 import {Modal} from '../modal';
-import Critical from './icons/critical.svg';
-import Info from './icons/info.svg';
-import Success from './icons/success.svg';
-import Warning from './icons/warning.svg';
 import {PromptContextProvider} from './Prompt.context';
 import classes from './Prompt.module.css';
 import {PromptCancelButton, PromptCancelButtonStylesNamesVariant} from './PromptCancelButton';
 import {PromptConfirmButton, PromptConfirmButtonStylesNamesVariant} from './PromptConfirmButton';
+import CriticalIcon from './icons/CriticalIcon';
+import InfoIcon from './icons/InfoIcon';
+import SuccessIcon from './icons/SuccessIcon';
+import WarningIcon from './icons/WarningIcon';
 
 export type PromptVariant = 'success' | 'warning' | 'critical' | 'info';
 export type PromptVars = {root: '--prompt-icon-size'};
 export type PromptStylesNames =
-    | ModalStylesNames
+    | Exclude<ModalStylesNames, 'title'>
     | 'icon'
     | PromptCancelButtonStylesNamesVariant
     | PromptConfirmButtonStylesNamesVariant;
@@ -40,7 +39,6 @@ export interface PromptProps
     variant?: PromptVariant;
     children: ReactNode;
     title: ReactNode;
-    icon?: ReactNode;
 }
 
 export type PromptFactory = Factory<{
@@ -56,11 +54,11 @@ export type PromptFactory = Factory<{
     };
 }>;
 
-const PROMPT_VARIANT_ICONS_SRC: Record<PromptVariant, string> = {
-    success: Success,
-    warning: Warning,
-    critical: Critical,
-    info: Info,
+const PromptVariantIconsMapping: Record<PromptVariant, ComponentType> = {
+    success: SuccessIcon,
+    warning: WarningIcon,
+    critical: CriticalIcon,
+    info: InfoIcon,
 };
 
 const defaultProps: Partial<PromptProps> = {
@@ -68,15 +66,9 @@ const defaultProps: Partial<PromptProps> = {
     centered: true,
 };
 
-const varsResolver = createVarsResolver<PromptFactory>((_theme, {icon}) => ({
-    root: {
-        '--prompt-icon-size': icon ? undefined : '88px',
-    },
-}));
-
 export const Prompt = factory<PromptFactory>((_props, ref) => {
     const props = useProps('Prompt', defaultProps, _props);
-    const {variant, title, icon, children, className, classNames, style, styles, unstyled, vars, ...others} = props;
+    const {variant, title, children, className, classNames, style, styles, unstyled, vars, ...others} = props;
     const getStyles = useStyles<PromptFactory>({
         name: 'Prompt',
         props,
@@ -87,7 +79,6 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
         styles,
         unstyled,
         vars,
-        varsResolver,
     });
     const stylesApiProps = {classNames, styles};
 
@@ -95,26 +86,23 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
     const otherChildren: ReactElement[] = [];
 
     Children.forEach(children, (child: ReactElement) => {
-        (child.type === Modal.Footer ? footers : otherChildren).push(child);
+        (child.type === Prompt.Footer ? footers : otherChildren).push(child);
     });
 
+    const IconComponent = PromptVariantIconsMapping[variant];
+
     return (
         <PromptContextProvider value={{variant, getStyles}}>
             <Modal.Root ref={ref} variant="prompt" size="sm" {...others} {...getStyles('root')}>
                 <Modal.Overlay {...getStyles('overlay', stylesApiProps)} />
                 <Modal.Content {...getStyles('content', stylesApiProps)}>
                     <Modal.Header {...getStyles('header', stylesApiProps)}>
-                        {icon || icon === null ? (
-                            icon
-                        ) : (
-                            <Image
-                                alt=""
-                                role="presentation"
-                                {...getStyles('icon', stylesApiProps)}
-                                src={PROMPT_VARIANT_ICONS_SRC[variant]}
-                            />
-                        )}
-                        <Modal.Title {...getStyles('title', stylesApiProps)}>{title}</Modal.Title>
+                        <IconComponent />
+                        <Modal.Title>
+                            <Title order={3} component="div">
+                                {title}
+                            </Title>
+                        </Modal.Title>
                         <Modal.CloseButton {...getStyles('close', stylesApiProps)} />
                     </Modal.Header>
                     <Modal.Body {...getStyles('body', stylesApiProps)}>

package/src/components/prompt/PromptCancelButton.tsx

@@ -1,5 +1,5 @@
-import {Button, CompoundStylesApiProps, factory, Factory, useProps} from '@mantine/core';
-import {ButtonProps} from '../button/Button';
+import {CompoundStylesApiProps, factory, Factory, useProps} from '@mantine/core';
+import {Button, ButtonProps} from '../button/Button';
 import {usePromptContext} from './Prompt.context';
 
 export type PromptCancelButtonStylesNamesVariant = 'cancel';
@@ -22,12 +22,5 @@ export const PromptCancelButton = factory<PromptCancelButtonFactory>((_props, re
     const props = useProps('PromptCancelButton', defaultProps, _props);
     const {className, classNames, style, styles, unstyled, vars, ...others} = props;
 
-    return (
-        <Button
-            ref={ref}
-            variant="outline"
-            {...others}
-            {...getStyles('cancel', {style, styles, className, classNames})}
-        />
-    );
+    return <Button.Tertiary ref={ref} {...others} {...getStyles('cancel', {style, styles, className, classNames})} />;
 });

package/src/components/prompt/PromptConfirmButton.tsx

@@ -1,4 +1,5 @@
-import {CompoundStylesApiProps, factory, Factory, useProps} from '@mantine/core';
+import {CompoundStylesApiProps, factory, Factory, PolymorphicComponentProps, useProps} from '@mantine/core';
+import {JSXElementConstructor, ReactElement} from 'react';
 import {Button, ButtonProps} from '../button/Button';
 import {PromptVariant} from './Prompt';
 import {usePromptContext} from './Prompt.context';
@@ -16,11 +17,16 @@ export type PromptConfirmButtonFactory = Factory<{
     compound: true;
 }>;
 
-const COLOR_BY_VARIANT: Record<PromptVariant, string> = {
-    success: 'action',
-    info: 'action',
-    warning: 'critical',
-    critical: 'critical',
+const COMPONENT_BY_VARIANT: Record<
+    PromptVariant,
+    <L = 'button'>(
+        props: PolymorphicComponentProps<L, ButtonProps>,
+    ) => ReactElement<any, string | JSXElementConstructor<any>>
+> = {
+    success: Button.Primary,
+    info: Button.Primary,
+    warning: Button.DestructivePrimary,
+    critical: Button.DestructivePrimary,
 };
 
 const defaultProps: Partial<PromptConfirmButtonProps> = {};
@@ -40,12 +46,10 @@ export const PromptConfirmButton = factory<PromptConfirmButtonFactory>((_props,
         disabledTooltipProps,
         ...others
     } = props;
-
+    const Component = COMPONENT_BY_VARIANT[variant];
     return (
-        <Button
+        <Component
             ref={ref}
-            variant="filled"
-            color={COLOR_BY_VARIANT[variant]}
             disabled={disabled}
             disabledTooltip={disabledTooltip}
             disabledTooltipProps={disabledTooltipProps}

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

@@ -1,5 +1,5 @@
 import {render, screen} from '@test-utils';
-import {Prompt} from '../Prompt';
+import {Prompt, PromptVariant} from '../Prompt';
 
 describe('Prompt', () => {
     it('displays the title, body and close button', () => {
@@ -9,6 +9,7 @@ describe('Prompt', () => {
                 <Prompt.Footer>footer content</Prompt.Footer>
             </Prompt>,
         );
+        expect(screen.getByRole('dialog', {name: /title modal/i})).toBeInTheDocument();
         expect(screen.getByText(/content modal/i)).toBeInTheDocument();
         expect(screen.getByText(/footer content/i)).toBeInTheDocument();
         expect(screen.getByText(/title modal/i)).toBeInTheDocument();
@@ -27,21 +28,15 @@ describe('Prompt', () => {
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    it('display an icon', () => {
-        render(
-            <Prompt opened onClose={vi.fn()} title="title modal">
-                content modal
-            </Prompt>,
-        );
-        expect(screen.getByRole('presentation')).toBeVisible();
-    });
-
-    it('does not display the icon when the icon prop is null', () => {
-        render(
-            <Prompt opened onClose={vi.fn()} title="title modal" icon={null}>
-                content modal
-            </Prompt>,
-        );
-        expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
-    });
+    it.each(['info', 'success', 'warning', 'critical'])(
+        'displays a $0 icon when the prompt is of variant $0',
+        (variant) => {
+            render(
+                <Prompt opened onClose={vi.fn()} title="title modal" variant={variant as PromptVariant}>
+                    content modal
+                </Prompt>,
+            );
+            expect(screen.getByRole('img', {name: variant})).toBeVisible();
+        },
+    );
 });

package/src/components/prompt/icons/CriticalIcon.tsx

@@ -0,0 +1,18 @@
+const CriticalIcon = () => (
+    <svg
+        role="img"
+        aria-label="critical"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M25.3336 2.66992C26.354 2.66987 27.3358 3.05974 28.0783 3.75977C28.8207 4.4598 29.2675 5.41707 29.3274 6.43573L29.3341 6.67042L29.3341 25.3394C29.3341 26.3598 28.9442 27.3417 28.2442 28.0841C27.5442 28.8265 26.5869 29.2734 25.5683 29.3333L25.3336 29.3399L6.66456 29.3399C5.64415 29.34 4.66229 28.9501 3.91987 28.2501C3.17745 27.55 2.73059 26.5928 2.67073 25.5741L2.66406 25.3394L2.66406 6.67042C2.66401 5.65001 3.05388 4.66815 3.75391 3.92573C4.45394 3.18331 5.41122 2.73645 6.42987 2.67659L6.66456 2.66992L25.3336 2.66992ZM16.0124 20.0054L15.843 20.0148C15.5189 20.0533 15.2202 20.2094 15.0035 20.4534C14.7868 20.6975 14.667 21.0125 14.667 21.3389C14.667 21.6653 14.7868 21.9804 15.0035 22.2244C15.2202 22.4685 15.5189 22.6245 15.843 22.6631L15.9991 22.6724L16.1684 22.6631C16.4925 22.6245 16.7912 22.4685 17.008 22.2244C17.2247 21.9804 17.3444 21.6653 17.3444 21.3389C17.3444 21.0125 17.2247 20.6975 17.008 20.4534C16.7912 20.2094 16.4925 20.0533 16.1684 20.0148L16.0124 20.0054ZM15.9991 9.33742C15.6724 9.33747 15.3572 9.45738 15.1131 9.67442C14.869 9.89146 14.7131 10.1905 14.6749 10.5149L14.6656 10.6709L14.6656 16.0049L14.6749 16.1609C14.7134 16.485 14.8695 16.7838 15.1136 17.0005C15.3576 17.2172 15.6727 17.3369 15.9991 17.3369C16.3255 17.3369 16.6405 17.2172 16.8846 17.0005C17.1286 16.7838 17.2847 16.485 17.3232 16.1609L17.3326 16.0049L17.3326 10.6709L17.3232 10.5149C17.285 10.1905 17.1291 9.89146 16.885 9.67442C16.6409 9.45738 16.3257 9.33747 15.9991 9.33742Z"
+            fill="#D2271B"
+        />
+    </svg>
+);
+
+export default CriticalIcon;

package/src/components/prompt/icons/InfoIcon.tsx

@@ -0,0 +1,18 @@
+const InfoIcon = () => (
+    <svg
+        role="img"
+        aria-label="info"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M15.9993 2.6665C23.3633 2.6665 29.3327 8.63584 29.3327 15.9998C29.3355 19.5005 27.9614 22.8618 25.5072 25.358C23.053 27.8543 19.7156 29.2853 16.2154 29.342C12.7152 29.3987 9.33313 28.0766 6.79935 25.6612C4.26556 23.2457 2.78333 19.9307 2.67268 16.4318L2.66602 15.9998L2.67135 15.6265C2.86868 8.43584 8.75935 2.6665 15.9993 2.6665ZM15.9993 14.6665H14.666L14.51 14.6758C14.186 14.7144 13.8873 14.8704 13.6706 15.1145C13.4539 15.3585 13.3342 15.6735 13.3342 15.9998C13.3342 16.3262 13.4539 16.6412 13.6706 16.8852C13.8873 17.1292 14.186 17.2853 14.51 17.3238L14.666 17.3332V21.3332L14.6753 21.4892C14.7104 21.7868 14.8448 22.0639 15.0567 22.2758C15.2686 22.4877 15.5457 22.6221 15.8433 22.6572L15.9993 22.6665H17.3327L17.4887 22.6572C17.7863 22.6221 18.0634 22.4877 18.2753 22.2758C18.4872 22.0639 18.6216 21.7868 18.6567 21.4892L18.666 21.3332L18.6567 21.1772C18.6248 20.9051 18.5099 20.6495 18.3277 20.4451C18.1454 20.2406 17.9046 20.0973 17.638 20.0345L17.4887 20.0078L17.3327 19.9998V15.9998L17.3233 15.8438C17.2883 15.5462 17.1539 15.2691 16.942 15.0572C16.7301 14.8453 16.453 14.7109 16.1553 14.6758L15.9993 14.6665ZM16.0127 10.6665L15.8433 10.6758C15.5193 10.7144 15.2206 10.8704 15.0039 11.1145C14.7872 11.3585 14.6675 11.6735 14.6675 11.9998C14.6675 12.3262 14.7872 12.6412 15.0039 12.8852C15.2206 13.1292 15.5193 13.2853 15.8433 13.3238L15.9993 13.3332L16.1687 13.3238C16.4927 13.2853 16.7914 13.1292 17.0081 12.8852C17.2248 12.6412 17.3445 12.3262 17.3445 11.9998C17.3445 11.6735 17.2248 11.3585 17.0081 11.1145C16.7914 10.8704 16.4927 10.7144 16.1687 10.6758L16.0127 10.6665Z"
+            fill="#959CAB"
+        />
+    </svg>
+);
+
+export default InfoIcon;

package/src/components/prompt/icons/SuccessIcon.tsx

@@ -0,0 +1,17 @@
+const SuccessIcon = () => (
+    <svg
+        role="img"
+        aria-label="success"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M22.666 4.45352C24.677 5.61466 26.3499 7.28088 27.5191 9.28725C28.6883 11.2936 29.3132 13.5705 29.3319 15.8926C29.3507 18.2147 28.7626 20.5015 27.626 22.5264C26.4894 24.5514 24.8437 26.2445 22.8517 27.4379C20.8597 28.6314 18.5905 29.2839 16.2688 29.3309C13.9471 29.3779 11.6534 28.8177 9.61475 27.7058C7.57609 26.5939 5.86318 24.9689 4.64557 22.9915C3.42797 21.0142 2.74789 18.7531 2.67268 16.4322L2.66602 16.0002L2.67268 15.5682C2.74735 13.2655 3.41741 11.0215 4.61753 9.05484C5.81766 7.08821 7.50689 5.46612 9.52054 4.34669C11.5342 3.22727 13.8035 2.64871 16.1074 2.66743C18.4112 2.68615 20.6708 3.30151 22.666 4.45352ZM20.942 12.3908C20.7124 12.1613 20.407 12.0234 20.0829 12.003C19.7589 11.9826 19.4386 12.0812 19.182 12.2802L19.0567 12.3908L14.666 16.7802L12.942 15.0575L12.8167 14.9468C12.5601 14.748 12.2398 14.6495 11.9159 14.67C11.5919 14.6904 11.2866 14.8283 11.057 15.0579C10.8275 15.2874 10.6896 15.5928 10.6692 15.9167C10.6487 16.2407 10.7472 16.561 10.946 16.8175L11.0567 16.9428L13.7233 19.6095L13.8487 19.7202C14.0825 19.9016 14.3701 20.0001 14.666 20.0001C14.962 20.0001 15.2495 19.9016 15.4833 19.7202L15.6087 19.6095L20.942 14.2762L21.0527 14.1508C21.2517 13.8943 21.3502 13.574 21.3299 13.2499C21.3095 12.9259 21.1716 12.6204 20.942 12.3908Z"
+            fill="#15B43C"
+        />
+    </svg>
+);
+export default SuccessIcon;

package/src/components/prompt/icons/WarningIcon.tsx

@@ -0,0 +1,18 @@
+const WarningIcon = () => (
+    <svg
+        role="img"
+        aria-label="warning"
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M15.9996 3.11621C17.2729 3.11621 18.4596 3.73888 19.1863 4.77888L19.3263 4.99221L30.1449 23.0562C30.4737 23.6256 30.6526 24.2692 30.6648 24.9266C30.6771 25.5841 30.5223 26.2338 30.2149 26.8151C29.9075 27.3964 29.4577 27.8902 28.9075 28.2502C28.3572 28.6102 27.7247 28.8247 27.0689 28.8735L26.8089 28.8842H5.1756C4.5192 28.8768 3.87538 28.7032 3.30423 28.3797C2.73307 28.0561 2.25321 27.5931 1.90942 27.0339C1.56564 26.4747 1.36914 25.8375 1.33828 25.1818C1.30742 24.5261 1.44319 23.8732 1.73293 23.2842L1.86493 23.0375L12.6783 4.98688C13.0245 4.41596 13.512 3.9439 14.0938 3.61624C14.6755 3.28857 15.3319 3.11636 15.9996 3.11621ZM16.0129 20.8895L15.8436 20.8989C15.5195 20.9374 15.2209 21.0935 15.0042 21.3375C14.7874 21.5815 14.6678 21.8965 14.6678 22.2229C14.6678 22.5492 14.7874 22.8642 15.0042 23.1083C15.2209 23.3523 15.5195 23.5083 15.8436 23.5469L15.9996 23.5562L16.1689 23.5469C16.493 23.5083 16.7917 23.3523 17.0084 23.1083C17.2251 22.8642 17.3448 22.5492 17.3448 22.2229C17.3448 21.8965 17.2251 21.5815 17.0084 21.3375C16.7917 21.0935 16.493 20.9374 16.1689 20.8989L16.0129 20.8895ZM15.9996 11.5562C15.673 11.5563 15.3578 11.6762 15.1138 11.8932C14.8697 12.1102 14.7138 12.4092 14.6756 12.7335L14.6663 12.8895V18.2229L14.6756 18.3789C14.7141 18.7029 14.8702 19.0016 15.1142 19.2183C15.3582 19.435 15.6732 19.5547 15.9996 19.5547C16.3259 19.5547 16.641 19.435 16.885 19.2183C17.129 19.0016 17.2851 18.7029 17.3236 18.3789L17.3329 18.2229V12.8895L17.3236 12.7335C17.2854 12.4092 17.1295 12.1102 16.8854 11.8932C16.6414 11.6762 16.3262 11.5563 15.9996 11.5562Z"
+            fill="#C89300"
+        />
+    </svg>
+);
+
+export default WarningIcon;

package/src/components/read-only/ReadOnlyInputStyles.ts

@@ -2,8 +2,8 @@ import {type MantineTheme} from '@mantine/core';
 
 export const readOnlyInputStyles = (theme: MantineTheme) => ({
     wrapper: {
-        '--input-bd': 'transparent',
-        '--input-bg': theme.colors.gray[2],
+        '--input-bd': 'var(--mantine-color-default-border)',
+        '--input-bg': theme.colors.gray[1],
         '--input-color': theme.colors.gray[7],
         '--input-placeholder-color': theme.colors.gray[7],
     },

package/src/components/sticky-footer/StickyFooter.module.css

@@ -2,17 +2,10 @@
     position: sticky;
     bottom: 0;
     z-index: 10;
-    background-color: white;
+    background-color: var(--mantine-color-body);
     padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
-
-    &[data-variant='modal-footer'] {
-        border-top: 1px solid var(--mantine-color-gray-3);
-        padding-bottom: 0;
-        margin: var(--mb-padding) calc(-1 * var(--mb-padding)) calc(var(--mantine-spacing-md) - var(--mb-padding))
-            calc(-1 * var(--mb-padding));
-    }
 }
 
 .border {
-    border-top: 1px solid var(--mantine-color-gray-3);
+    border-top: 1px solid var(--mantine-color-default-border);
 }

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

@@ -19,7 +19,7 @@
         left: 0;
         right: 0;
         bottom: 0;
-        border-bottom: 1px solid var(--mantine-color-gray-3);
+        border-bottom: 1px solid var(--mantine-color-default-border);
     }
 }
 
@@ -61,16 +61,20 @@
 }
 
 .filterEmpty {
-    color: var(--mantine-color-gray-5);
+    color: var(--mantine-color-dimmed);
 }
 
 /* Table.Header */
 .headerRoot {
-    border-bottom: 1px solid var(--mantine-color-gray-3);
-    background-color: var(--mantine-color-gray-1);
+    border-bottom: 1px solid var(--mantine-color-default-border);
+    background-color: var(--mantine-color-gray-0);
     padding: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
     position: relative;
     min-height: 69px;
+
+    &:where([data-with-border-top]) {
+        border-top: 1px solid var(--mantine-color-default-border);
+    }
 }
 
 .headerGridInner {
@@ -88,8 +92,8 @@
     text-align: left;
     color: var(--mantine-color-gray-6);
     height: var(--mantine-spacing-xl);
-    font-weight: 500;
-    font-size: var(--mantine-font-size-xs);
+    font-weight: var(--coveo-fw-bold);
+    font-size: var(--mantine-font-size-sm);
 
     &:first-of-type {
         padding-left: var(--mantine-spacing-xl);