@coveord/plasma-mantine 57.1.0 → 58.0.0

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

@@ -3,12 +3,37 @@ import {render, screen} from '../../../__tests__/Utils.js';
 import {ChildForm} from '../ChildForm.js';
 
 describe('ChildForm', () => {
-    it('renders the provided title and description', async () => {
+    it('renders the provided title and description', () => {
         render(<ChildForm in={true} title="This is a title" description="This is a description" />);
 
-        expect(screen.getByText(/this is a title/i)).toBeInTheDocument();
-        expect(screen.getByText(/this is a description/i)).toBeInTheDocument();
+        expect(screen.getByText(/this is a title/i)).toBeVisible();
+        expect(screen.getByText(/this is a description/i)).toBeVisible();
     });
+
+    it('renders a rich description node', () => {
+        render(
+            <ChildForm
+                in={true}
+                title="This is a title"
+                description={
+                    <div>
+                        <span>Rich description</span>
+                        <a href="https://example.com">Learn more</a>
+                    </div>
+                }
+            />,
+        );
+
+        expect(screen.getByText('Rich description')).toBeVisible();
+        expect(screen.getByRole('link', {name: 'Learn more'})).toBeVisible();
+    });
+
+    it('renders a numeric description', () => {
+        render(<ChildForm in={true} description={0} />);
+
+        expect(screen.getByText('0')).toBeInTheDocument();
+    });
+
     it('renders the content', () => {
         render(
             <ChildForm in={true}>
@@ -16,7 +41,7 @@ describe('ChildForm', () => {
             </ChildForm>,
         );
 
-        expect(screen.getByRole('textbox', {name: /text input/i})).toBeInTheDocument();
+        expect(screen.getByRole('textbox', {name: /text input/i})).toBeVisible();
     });
     it('hides the container', () => {
         render(

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

@@ -12,14 +12,9 @@
 
 .title {
     word-break: break-word;
-    color: var(--coveo-color-title);
 }
 
 .docAnchor {
     margin-left: var(--mantine-spacing-xs);
     vertical-align: middle;
 }
-
-.breadcrumbText {
-    color: var(--coveo-color-title);
-}

package/src/components/Header/HeaderDocAnchor/HeaderDocAnchor.tsx

@@ -9,8 +9,8 @@ import {
     useProps,
 } from '@mantine/core';
 import {ReactNode} from 'react';
-import {useHeaderContext} from '../Header.context.js';
 import {InfoToken} from '../../InfoToken/InfoToken.js';
+import {useHeaderContext} from '../Header.context.js';
 
 export type HeaderDocAnchorStyleNames = 'docAnchorTooltip' | 'docAnchor';
 
@@ -43,7 +43,7 @@ export type HeaderDocAnchorFactory = Factory<{
 
 const defaultProps: Partial<HeaderDocAnchorProps> = {
     position: 'right',
-    children: <InfoToken variant="question" />,
+    children: <InfoToken.Question />,
 };
 
 export const HeaderDocAnchor = factory<HeaderDocAnchorFactory>((_props, ref) => {

package/src/components/InfoToken/InfoToken.module.css

@@ -1,8 +1,16 @@
 .root {
-    --info-token-color: var(--mantine-color-primary);
-
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
-    color: var(--info-token-color);
+    color: var(--it-color);
+
+    &[data-variant='light'] {
+        background-color: var(--it-bg);
+        border-radius: var(--mantine-spacing-xxs);
+        padding: var(--mantine-spacing-xs);
+
+        &[data-size='xs'] {
+            padding: var(--mantine-spacing-xxs);
+        }
+    }
 }

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;