@coveord/plasma-mantine 57.2.0 → 58.0.0

package/src/components/InfoToken/InfoToken.tsx

@@ -1,83 +1,106 @@
 import {
-    IconAlertSquareFilled,
-    IconAlertTriangleFilled,
-    IconBulbFilled,
+    IconAlertSquare,
+    IconAlertTriangle,
+    IconBulb,
+    IconCheck,
     IconHelpCircle,
     IconInfoCircle,
-    IconInfoCircleFilled,
     TablerIcon,
 } from '@coveord/plasma-react-icons';
 import {
     Box,
     BoxProps,
+    createPolymorphicComponent,
     createVarsResolver,
     Factory,
-    MantineSize,
+    PolymorphicComponentProps,
     polymorphicFactory,
     StylesApiProps,
     useProps,
     useStyles,
 } from '@mantine/core';
+import {forwardRef, FunctionComponent, ReactElement} from 'react';
 import classes from './InfoToken.module.css';
 
 export type InfoTokenFactory = Factory<{
-    props: InfoTokenProps;
+    props: InfoTokenInternalProps;
     defaultRef: HTMLDivElement;
     defaultComponent: 'div';
     stylesNames: InfoTokenComponentStylesNames;
     vars: InfoTokenCssVariables;
     variant: InfoTokenVariant;
-    staticComponents: {
-        Information: typeof TokenInformation;
-        InformationOutline: typeof TokenInformationOutline;
-        Advice: typeof TokenAdvice;
-        Warning: typeof TokenWarning;
-        Error: typeof TokenError;
-        Question: typeof TokenQuestion;
-    };
 }>;
 export type InfoTokenComponentStylesNames = 'root';
-export type InfoTokenVariant = 'information' | 'information-outline' | 'advice' | 'warning' | 'error' | 'question';
+export type InfoTokenType = 'information' | 'advice' | 'warning' | 'error' | 'question' | 'success';
+export type InfoTokenVariant = 'outline' | 'light';
+export type InfoTokenSizes = 'xs' | 'sm' | 'md' | 'lg';
 export type InfoTokenCssVariables = {
-    root: '--info-token-color';
+    root: '--it-color' | '--it-bg';
 };
 
-export interface InfoTokenProps extends BoxProps, StylesApiProps<InfoTokenFactory> {
+interface InfoTokenInternalProps extends BoxProps, StylesApiProps<InfoTokenFactory> {
     /**
      * The variant of the token.
      *
-     * @default 'information'
+     * @default 'outline'
      */
     variant?: InfoTokenVariant;
+    /**
+     * The semantic type of the token
+     *
+     * @default 'information'
+     */
+    type?: InfoTokenType;
     /**
      * The size of the info token.
      *
-     * @default 'sm'
+     * @default 'xs'
      */
-    size?: MantineSize;
+    size?: InfoTokenSizes;
 }
 
-const defaultProps: Partial<InfoTokenProps> = {variant: 'information', size: 'xs'};
+export type InfoTokenProps = Omit<InfoTokenInternalProps, 'type'>;
 
-const colorResolver = (variant: InfoTokenVariant): string => {
-    switch (variant) {
+type InfoTokenCompoundComponent = (<C = 'div'>(props: PolymorphicComponentProps<C, InfoTokenProps>) => ReactElement) &
+    Omit<FunctionComponent<PolymorphicComponentProps<any, InfoTokenProps>>, never>;
+
+const defaultProps: Partial<InfoTokenInternalProps> = {variant: 'outline', type: 'information', size: 'xs'};
+
+const colorResolver = (type: InfoTokenType): string => {
+    switch (type) {
         case 'error':
             return 'var(--mantine-color-error)';
         case 'advice':
         case 'question':
             return 'var(--coveo-color-text-primary)';
         case 'warning':
-            return 'var(--mantine-color-warning-filled)';
+            return 'var(--mantine-color-yellow-text)';
+        case 'success':
+            return 'var(--mantine-color-green-text)';
         case 'information':
         default:
-            return 'var(--mantine-color-gray-3)';
+            return 'var(--mantine-color-gray-text)';
     }
 };
 
-const sizeResolver = (size: MantineSize): number => {
-    if (typeof size === 'number') {
-        return size;
+const bgColorResolver = (type: InfoTokenType): string => {
+    switch (type) {
+        case 'error':
+            return 'var(--mantine-color-red-light)';
+        case 'advice':
+        case 'question':
+            return 'var(--mantine-primary-color-light)';
+        case 'warning':
+            return 'var(--mantine-color-yellow-light)';
+        case 'success':
+            return 'var(--mantine-color-green-light)';
+        case 'information':
+        default:
+            return 'var(--mantine-color-gray-light)';
     }
+};
+
+const sizeResolver = (size: InfoTokenSizes): number => {
     switch (size) {
         case 'sm':
             return 20;
@@ -85,44 +108,43 @@ const sizeResolver = (size: MantineSize): number => {
             return 24;
         case 'lg':
             return 32;
-        case 'xl':
-            return 40;
         case 'xs':
         default:
             return 16;
     }
 };
 
-const iconResolver = (variant: InfoTokenVariant): TablerIcon => {
-    switch (variant) {
+const iconResolver = (type: InfoTokenType): TablerIcon => {
+    switch (type) {
         case 'error':
-            return IconAlertSquareFilled;
-        case 'information':
-            return IconInfoCircleFilled;
-        case 'information-outline':
-            return IconInfoCircle;
+            return IconAlertSquare;
         case 'question':
             return IconHelpCircle;
         case 'warning':
-            return IconAlertTriangleFilled;
+            return IconAlertTriangle;
         case 'advice':
+            return IconBulb;
+        case 'success':
+            return IconCheck;
         default:
-            return IconBulbFilled;
+            return IconInfoCircle;
     }
 };
 
-const varsResolver = createVarsResolver<InfoTokenFactory>((_theme, {variant}) => {
-    const color = colorResolver(variant);
+const varsResolver = createVarsResolver<InfoTokenFactory>((_theme, {type}) => {
+    const color = colorResolver(type);
+    const bgColor = bgColorResolver(type);
     return {
         root: {
-            '--info-token-color': color,
+            '--it-color': color,
+            '--it-bg': bgColor,
         },
     };
 });
 
-export const InfoToken = polymorphicFactory<InfoTokenFactory>((_props, ref) => {
+const _InfoToken = polymorphicFactory<InfoTokenFactory>((_props, ref) => {
     const props = useProps('InfoToken', defaultProps, _props);
-    const {variant, vars, className, style, unstyled, styles, classNames, size, ...others} = props;
+    const {variant, type, vars, className, style, unstyled, styles, classNames, size, ...others} = props;
     const getStyles = useStyles<InfoTokenFactory>({
         name: 'InfoToken',
         classes,
@@ -134,13 +156,13 @@ export const InfoToken = polymorphicFactory<InfoTokenFactory>((_props, ref) => {
         vars,
         varsResolver,
     });
-    const IconComponent = iconResolver(variant);
+    const IconComponent = iconResolver(type);
     return (
         <Box
             ref={ref}
             variant={variant}
             role="img"
-            aria-label={variant}
+            aria-label={type}
             size={size}
             {...getStyles('root', {
                 className,
@@ -155,25 +177,19 @@ export const InfoToken = polymorphicFactory<InfoTokenFactory>((_props, ref) => {
     );
 });
 
-const TokenInformation = InfoToken.withProps({
-    variant: 'information',
-});
-(TokenInformation as typeof InfoToken).displayName = 'InfoToken.Information';
-const TokenInformationOutline = InfoToken.withProps({
-    variant: 'information-outline',
-});
-const TokenAdvice = InfoToken.withProps({variant: 'advice'});
-(TokenAdvice as typeof InfoToken).displayName = 'InfoToken.Advice';
-const TokenWarning = InfoToken.withProps({variant: 'warning'});
-(TokenWarning as typeof InfoToken).displayName = 'InfoToken.Warning';
-const TokenError = InfoToken.withProps({variant: 'error'});
-(TokenError as typeof InfoToken).displayName = 'InfoToken.Error';
-const TokenQuestion = InfoToken.withProps({variant: 'question'});
-(TokenQuestion as typeof InfoToken).displayName = 'InfoToken.Question';
+const createInfoTokenCompound = (type: InfoTokenType, displayName: string): InfoTokenCompoundComponent => {
+    const Component: InfoTokenCompoundComponent = createPolymorphicComponent<'div', InfoTokenProps>(
+        forwardRef<any, InfoTokenProps>((props, ref) => <_InfoToken ref={ref} {...props} type={type} />),
+    );
+    Component.displayName = displayName;
+    return Component;
+};
 
-InfoToken.Information = TokenInformation;
-InfoToken.InformationOutline = TokenInformationOutline;
-InfoToken.Advice = TokenAdvice;
-InfoToken.Warning = TokenWarning;
-InfoToken.Error = TokenError;
-InfoToken.Question = TokenQuestion;
+export const InfoToken = {
+    Information: createInfoTokenCompound('information', 'InfoToken.Information'),
+    Advice: createInfoTokenCompound('advice', 'InfoToken.Advice'),
+    Warning: createInfoTokenCompound('warning', 'InfoToken.Warning'),
+    Error: createInfoTokenCompound('error', 'InfoToken.Error'),
+    Question: createInfoTokenCompound('question', 'InfoToken.Question'),
+    Success: createInfoTokenCompound('success', 'InfoToken.Success'),
+} as const;

package/src/components/Input/Input.ts

@@ -1,5 +1,27 @@
-import {Input} from '@mantine/core';
+import {Input as MantineInput, type InputFactory as MantineInputFactory, type InputProps} from '@mantine/core';
+import {
+    InputLabelInfo,
+    type InputLabelInfoFactory,
+    type InputLabelInfoProps,
+    type InputLabelInfoStylesNames,
+} from './InputLabelInfo.js';
+
+type PlasmaInputFactory = Omit<MantineInputFactory, 'staticComponents'> & {
+    staticComponents: MantineInputFactory['staticComponents'] & {
+        LabelInfo: typeof InputLabelInfo;
+    };
+};
+
+const Input = MantineInput as typeof MantineInput & {
+    LabelInfo: typeof InputLabelInfo;
+};
 
 Input.displayName = 'Input';
+Input.LabelInfo = InputLabelInfo;
+
+InputLabelInfo.displayName = 'Input.LabelInfo';
 
-export {Input, type InputFactory, type InputProps} from '@mantine/core';
+export {Input};
+export type InputFactory = PlasmaInputFactory;
+export type {InputProps, InputLabelInfoFactory, InputLabelInfoProps, InputLabelInfoStylesNames};
+export {InputLabelInfo};

package/src/components/Input/InputLabelInfo.module.css

@@ -0,0 +1,5 @@
+.labelInfo {
+    position: relative; /* Required to make it work within a Switch label */
+    margin-left: var(--mantine-spacing-xxs);
+    vertical-align: text-bottom;
+}

package/src/components/Input/InputLabelInfo.tsx

@@ -0,0 +1,43 @@
+import {factory, StylesApiProps, Tooltip, useProps, useStyles, type Factory, type TooltipProps} from '@mantine/core';
+import {type ReactNode} from 'react';
+import {InfoToken} from '../InfoToken/InfoToken.js';
+import classes from './InputLabelInfo.module.css';
+
+export type InputLabelInfoStylesNames = 'labelInfo';
+
+export interface InputLabelInfoProps
+    extends
+        Omit<TooltipProps, 'label' | 'classNames' | 'attributes' | 'styles' | 'vars'>,
+        StylesApiProps<InputLabelInfoFactory> {
+    children: ReactNode;
+}
+
+export type InputLabelInfoFactory = Factory<{
+    props: InputLabelInfoProps;
+    ref: HTMLSpanElement;
+    stylesNames: InputLabelInfoStylesNames;
+}>;
+
+const defaultProps = {} satisfies Partial<InputLabelInfoProps>;
+
+export const InputLabelInfo = factory<InputLabelInfoFactory>((_props, ref) => {
+    const props = useProps('InputLabelInfo', defaultProps, _props);
+    const {classNames, className, style, styles, unstyled, vars, children, attributes, ...others} = props;
+    const getStyles = useStyles<InputLabelInfoFactory>({
+        name: 'InputLabelInfo',
+        props,
+        style,
+        styles,
+        unstyled,
+        attributes,
+        className,
+        classes,
+        classNames,
+        vars,
+    });
+    return (
+        <Tooltip label={children} {...others}>
+            <InfoToken.Information component="span" {...getStyles('labelInfo', {className, style})} ref={ref} />
+        </Tooltip>
+    );
+});

package/src/components/Input/__tests__/Input.spec.tsx

@@ -0,0 +1,33 @@
+import {render, screen, userEvent} from '@test-utils';
+
+import {Input, InputLabelInfo} from '../Input.js';
+
+describe('Input', () => {
+    it('exposes InputLabelInfo as a compound component', () => {
+        expect(Input.LabelInfo).toBe(InputLabelInfo);
+    });
+
+    it('renders LabelInfo inside the label prop and shows its tooltip content on hover', async () => {
+        const user = userEvent.setup();
+        render(
+            <Input.Wrapper
+                label={
+                    <>
+                        <span>Field label</span>
+                        <Input.LabelInfo>Helpful tooltip</Input.LabelInfo>
+                    </>
+                }
+            >
+                <Input />
+            </Input.Wrapper>,
+        );
+
+        expect(screen.getByText('Field label')).toBeVisible();
+        const infoToken = screen.getByRole('img', {name: 'information'});
+        expect(infoToken).toBeVisible();
+
+        await user.hover(infoToken);
+
+        expect(await screen.findByRole('tooltip')).toHaveTextContent('Helpful tooltip');
+    });
+});

package/src/components/Modal/Modal.tsx

@@ -40,7 +40,7 @@ const PlasmaModal = factory<PlasmaModalFactory>(({title, description, help, ...o
     return <MantineModal ref={ref} title={header} {...otherProps} />;
 });
 
-PlasmaModal.displayName = '@coveord/plasma-mantine/Modal';
+PlasmaModal.displayName = 'Modal';
 PlasmaModal.Root = MantineModal.Root;
 PlasmaModal.Body = MantineModal.Body;
 PlasmaModal.Overlay = MantineModal.Overlay;

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

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

package/src/components/Modal/ModalFooter.tsx

@@ -31,5 +31,7 @@ export const ModalFooter = factory<ModalFooterFactory>((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={classes.root} ref={footerRef} {...props} />;
+    return <StickyFooter borderTop className={classes.root} ref={footerRef} {...props} />;
 });
+
+ModalFooter.displayName = 'Modal.Footer';

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

@@ -1,20 +1,3 @@
-.root {
-    --prompt-icon-size: 32px;
-}
-
-.body {
-    padding-left: calc(var(--prompt-icon-size) + var(--mantine-spacing-sm) + var(--mb-padding));
-}
-
-.icon {
-    width: var(--prompt-icon-size);
-    height: var(--prompt-icon-size);
-}
-
 .header {
     gap: var(--mantine-spacing-sm);
 }
-
-.inner {
-    color: var(--mantine-color-dimmed);
-}

package/src/components/Prompt/Prompt.tsx

@@ -9,18 +9,15 @@ import {
     useProps,
     useStyles,
 } from '@mantine/core';
-import {Children, ComponentType, ReactElement, ReactNode} from 'react';
+import {Children, ComponentProps, ComponentType, forwardRef, FunctionComponent, ReactElement, ReactNode} from 'react';
+import {InfoToken} from '../InfoToken/InfoToken.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';
 import {PromptConfirmButton, PromptConfirmButtonStylesNamesVariant} from './PromptConfirmButton.js';
-import CriticalIcon from './icons/CriticalIcon.js';
-import InfoIcon from './icons/InfoIcon.js';
-import SuccessIcon from './icons/SuccessIcon.js';
-import WarningIcon from './icons/WarningIcon.js';
 
-export type PromptVariant = 'success' | 'warning' | 'critical' | 'info';
+export type PromptVariant = 'success' | 'warning' | 'critical' | 'information';
 export type PromptVars = {root: '--prompt-icon-size'};
 export type PromptStylesNames =
     | Exclude<ModalStylesNames, 'title'>
@@ -28,45 +25,39 @@ export type PromptStylesNames =
     | PromptCancelButtonStylesNamesVariant
     | PromptConfirmButtonStylesNamesVariant;
 
+type PromptStylesApiProps = Omit<StylesApiProps<PromptFactory>, 'variant'>;
+
 export interface PromptProps
-    extends StylesApiProps<PromptFactory>,
-        Omit<ModalRootProps, 'classNames' | 'styles' | 'vars' | 'attributes'> {
-    /**
-     * Controls prompt appearance
-     *
-     * @default "info"
-     */
-    variant?: PromptVariant;
+    extends PromptStylesApiProps, Omit<ModalRootProps, 'classNames' | 'styles' | 'vars' | 'attributes' | 'variant'> {
     children: ReactNode;
     title: ReactNode;
 }
 
+interface PromptInternalProps extends PromptProps {
+    variant?: PromptVariant;
+}
+
 export type PromptFactory = Factory<{
-    props: PromptProps;
+    props: PromptInternalProps;
     ref: HTMLDivElement;
     vars: PromptVars;
     variant: PromptVariant;
     stylesNames: PromptStylesNames;
-    staticComponents: {
-        CancelButton: typeof PromptCancelButton;
-        ConfirmButton: typeof PromptConfirmButton;
-        Footer: typeof PromptFooter;
-    };
 }>;
 
-const PromptVariantIconsMapping: Record<PromptVariant, ComponentType> = {
-    success: SuccessIcon,
-    warning: WarningIcon,
-    critical: CriticalIcon,
-    info: InfoIcon,
+const PromptVariantIconsMapping: Record<PromptVariant, typeof InfoToken.Information> = {
+    success: InfoToken.Success,
+    warning: InfoToken.Warning,
+    critical: InfoToken.Error,
+    information: InfoToken.Information,
 };
 
-const defaultProps: Partial<PromptProps> = {
-    variant: 'info',
+const defaultProps: Partial<PromptInternalProps> = {
+    variant: 'information',
     centered: true,
 };
 
-export const Prompt = factory<PromptFactory>((_props, ref) => {
+const _Prompt = factory<PromptFactory>((_props, ref) => {
     const props = useProps('Prompt', defaultProps, _props);
     const {
         variant,
@@ -98,7 +89,7 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
     const otherChildren: ReactElement[] = [];
 
     Children.forEach(children, (child: ReactElement) => {
-        (child.type === Prompt.Footer ? footers : otherChildren).push(child);
+        (child.type === PromptFooter ? footers : otherChildren).push(child);
     });
 
     const IconComponent = PromptVariantIconsMapping[variant];
@@ -109,7 +100,12 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
                 <Modal.Overlay {...getStyles('overlay', stylesApiProps)} />
                 <Modal.Content {...getStyles('content', stylesApiProps)}>
                     <Modal.Header {...getStyles('header', stylesApiProps)}>
-                        <IconComponent />
+                        <IconComponent
+                            {...getStyles('icon', stylesApiProps)}
+                            variant="light"
+                            size="sm"
+                            aria-label={variant}
+                        />
                         <Modal.Title>
                             <Title order={3} component="div">
                                 {title}
@@ -126,9 +122,27 @@ export const Prompt = factory<PromptFactory>((_props, ref) => {
         </PromptContextProvider>
     );
 });
+_Prompt.displayName = 'Prompt';
+
+type PromptCompoundComponent = ((props: PromptProps) => ReactElement) & Omit<FunctionComponent<PromptProps>, never>;
 
-const PromptFooter = Modal.Footer.withProps({pt: 0});
+const PromptFooter: ComponentType<ComponentProps<typeof Modal.Footer>> = (props) => <Modal.Footer {...props} />;
+PromptFooter.displayName = 'Prompt.Footer';
+
+const createPromptCompound = (variant: PromptVariant, displayName: string): PromptCompoundComponent => {
+    const Component = forwardRef<HTMLDivElement, PromptProps>((props, ref) => (
+        <_Prompt ref={ref} {...props} variant={variant} />
+    ));
+    Component.displayName = displayName;
+    return Component as PromptCompoundComponent;
+};
 
-Prompt.CancelButton = PromptCancelButton;
-Prompt.ConfirmButton = PromptConfirmButton;
-Prompt.Footer = PromptFooter;
+export const Prompt = {
+    Information: createPromptCompound('information', 'Prompt.Information'),
+    Success: createPromptCompound('success', 'Prompt.Success'),
+    Warning: createPromptCompound('warning', 'Prompt.Warning'),
+    Critical: createPromptCompound('critical', 'Prompt.Critical'),
+    CancelButton: PromptCancelButton,
+    ConfirmButton: PromptConfirmButton,
+    Footer: PromptFooter,
+} as const;

package/src/components/Prompt/PromptCancelButton.tsx

@@ -5,7 +5,8 @@ import {usePromptContext} from './Prompt.context.js';
 export type PromptCancelButtonStylesNamesVariant = 'cancel';
 
 export interface PromptCancelButtonProps
-    extends CompoundStylesApiProps<PromptCancelButtonFactory>,
+    extends
+        CompoundStylesApiProps<PromptCancelButtonFactory>,
         Omit<ButtonProps, 'primary' | 'classNames' | 'styles' | 'vars' | 'variant'> {}
 
 export type PromptCancelButtonFactory = Factory<{
@@ -24,3 +25,4 @@ export const PromptCancelButton = factory<PromptCancelButtonFactory>((_props, re
 
     return <Button.Tertiary ref={ref} {...others} {...getStyles('cancel', {style, styles, className, classNames})} />;
 });
+PromptCancelButton.displayName = 'Prompt.CancelButton';

package/src/components/Prompt/PromptConfirmButton.tsx

@@ -7,7 +7,8 @@ import {usePromptContext} from './Prompt.context.js';
 export type PromptConfirmButtonStylesNamesVariant = 'confirm';
 
 export interface PromptConfirmButtonProps
-    extends CompoundStylesApiProps<PromptConfirmButtonFactory>,
+    extends
+        CompoundStylesApiProps<PromptConfirmButtonFactory>,
         Omit<ButtonProps, 'primary' | 'classNames' | 'styles' | 'vars' | 'variant'> {}
 
 export type PromptConfirmButtonFactory = Factory<{
@@ -24,7 +25,7 @@ const COMPONENT_BY_VARIANT: Record<
     ) => ReactElement<any, string | JSXElementConstructor<any>>
 > = {
     success: Button.Primary,
-    info: Button.Primary,
+    information: Button.Primary,
     warning: Button.DestructivePrimary,
     critical: Button.DestructivePrimary,
 };
@@ -58,3 +59,4 @@ export const PromptConfirmButton = factory<PromptConfirmButtonFactory>((_props,
         />
     );
 });
+PromptConfirmButton.displayName = 'Prompt.ConfirmButton';

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

@@ -1,13 +1,13 @@
 import {render, screen} from '@test-utils';
-import {Prompt, PromptVariant} from '../Prompt.js';
+import {Prompt} from '../Prompt.js';
 
 describe('Prompt', () => {
     it('displays the title, body and close button', () => {
         render(
-            <Prompt opened onClose={vi.fn()} title="title modal">
+            <Prompt.Information opened onClose={vi.fn()} title="title modal">
                 content modal
                 <Prompt.Footer>footer content</Prompt.Footer>
-            </Prompt>,
+            </Prompt.Information>,
         );
         expect(screen.getByRole('dialog', {name: /title modal/i})).toBeInTheDocument();
         expect(screen.getByText(/content modal/i)).toBeInTheDocument();
@@ -19,24 +19,26 @@ describe('Prompt', () => {
     it('calls onClose when clicking on the close button', () => {
         const onClose = vi.fn();
         render(
-            <Prompt opened onClose={onClose} title="title modal">
+            <Prompt.Information opened onClose={onClose} title="title modal">
                 content modal
-            </Prompt>,
+            </Prompt.Information>,
         );
 
         screen.getByRole('button').click();
         expect(onClose).toHaveBeenCalledTimes(1);
     });
 
-    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();
-        },
-    );
+    it.each([
+        ['information', Prompt.Information],
+        ['success', Prompt.Success],
+        ['warning', Prompt.Warning],
+        ['critical', Prompt.Critical],
+    ])('displays a %s icon when the prompt is of variant %s', (variant, Component) => {
+        render(
+            <Component opened onClose={vi.fn()} title="title modal">
+                content modal
+            </Component>,
+        );
+        expect(screen.getByRole('img', {name: variant})).toBeVisible();
+    });
 });

package/src/components/StickyFooter/StickyFooter.tsx

@@ -33,7 +33,7 @@ export type StickyFooterFactory = Factory<{
 }>;
 
 const defaultProps: Partial<StickyFooterProps> = {
-    gap: 'sm',
+    gap: 'xs',
     justify: 'flex-end',
 };