@coveord/plasma-mantine 55.7.3 → 55.8.2

package/src/components/badge/Badge.tsx

@@ -0,0 +1,146 @@
+import {
+    Badge as MantineBadge,
+    BadgeCssVariables,
+    BadgeProps,
+    BadgeStylesNames,
+    BadgeVariant,
+    polymorphicFactory,
+    PolymorphicFactory,
+    PolymorphicComponentProps,
+    alpha,
+} from '@mantine/core';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes} from 'react';
+
+export interface SemanticBadgeProps {
+    /**
+     * The size of the badge.
+     * @default 'small'
+     */
+    size?: 'small' | 'large';
+    /**
+     * Whether the badge is displayed over a light or dark background.
+     * @default 'light'
+     */
+    on?: 'light' | 'dark';
+    /**
+     * The content of the badge.
+     */
+    children?: ReactNode;
+}
+
+export type SemanticBadge = ForwardRefExoticComponent<SemanticBadgeProps & RefAttributes<HTMLDivElement>>;
+
+const enhanceBadge = (
+    ComponentLight: <L = 'div'>(props: PolymorphicComponentProps<L, BadgeProps>) => ReactElement,
+    ComponentDark: <L = 'div'>(props: PolymorphicComponentProps<L, BadgeProps>) => ReactElement,
+): SemanticBadge =>
+    forwardRef<HTMLDivElement, SemanticBadgeProps>((props, ref) => {
+        const Component = props.on === 'dark' ? ComponentDark : ComponentLight;
+        return (
+            <Component
+                ref={ref}
+                {...props}
+                py={2}
+                px={12}
+                size={props.size === 'large' ? 'lg' : 'md'}
+                h={props.size === 'large' ? 22 : 20}
+            />
+        );
+    });
+
+const BadgePrimary = enhanceBadge(
+    MantineBadge.withProps({
+        variant: 'light',
+        bd: '1px solid var(--badge-bg)',
+        c: 'var(--mantine-primary-color-6)',
+    }),
+    MantineBadge.withProps({
+        variant: 'light',
+        bd: `1px solid ${alpha('var(--mantine-primary-color-3)', 0.32)}`,
+        c: 'var(--mantine-primary-color-2)',
+        bg: alpha('var(--mantine-primary-color-3)', 0.32),
+    }),
+);
+const BadgeSecondary = enhanceBadge(
+    MantineBadge.withProps({
+        variant: 'light',
+        color: 'gray',
+        bd: '1px solid var(--badge-bg)',
+        c: 'gray.7',
+    }),
+    MantineBadge.withProps({
+        variant: 'light',
+        color: 'gray',
+        c: 'var(--mantine-color-white)',
+        bd: `1px solid ${alpha('var(--mantine-color-gray-3)', 0.16)}`,
+        bg: alpha('var(--mantine-color-gray-3)', 0.16),
+    }),
+);
+const BadgeCritical = enhanceBadge(
+    MantineBadge.withProps({
+        variant: 'light',
+        color: 'critical',
+        bd: '1px solid var(--badge-bg)',
+        c: 'red.6',
+    }),
+    MantineBadge.withProps({
+        variant: 'light',
+        color: 'critical',
+        c: 'red.2',
+        bd: `1px solid ${alpha('var(--mantine-color-red-3)', 0.16)}`,
+        bg: alpha('var(--mantine-color-red-3)', 0.16),
+    }),
+);
+const BadgeWarning = enhanceBadge(
+    MantineBadge.withProps({
+        variant: 'light',
+        color: 'warning',
+        bd: '1px solid var(--badge-bg)',
+        c: 'yellow.6',
+    }),
+    MantineBadge.withProps({
+        variant: 'light',
+        color: 'warning',
+        c: 'yellow.2',
+        bd: `1px solid ${alpha('var(--mantine-color-yellow-3)', 0.16)}`,
+        bg: alpha('var(--mantine-color-yellow-3)', 0.16),
+    }),
+);
+const BadgeDisabled = enhanceBadge(
+    MantineBadge.withProps({
+        variant: 'light',
+        color: 'gray',
+        c: 'var(--coveo-color-text-disabled)',
+        bg: 'var(--coveo-color-bg-disabled)',
+    }),
+    MantineBadge.withProps({
+        variant: 'light',
+        color: 'gray',
+        c: 'dark.3',
+        bg: alpha('var(--mantine-color-gray-3)', 0.16),
+    }),
+);
+
+export type BadgeOverloadFactory = PolymorphicFactory<{
+    props: BadgeProps;
+    defaultRef: HTMLDivElement;
+    defaultComponent: 'div';
+    stylesNames: BadgeStylesNames;
+    vars: BadgeCssVariables;
+    variant: BadgeVariant;
+    staticComponents: {
+        Primary: SemanticBadge;
+        Secondary: SemanticBadge;
+        Critical: SemanticBadge;
+        Warning: SemanticBadge;
+        Disabled: SemanticBadge;
+    };
+}>;
+
+export const Badge = polymorphicFactory<BadgeOverloadFactory>((props, ref) => <MantineBadge ref={ref} {...props} />);
+
+Badge.Primary = BadgePrimary;
+Badge.Secondary = BadgeSecondary;
+Badge.Critical = BadgeCritical;
+Badge.Warning = BadgeWarning;
+Badge.Disabled = BadgeDisabled;

package/src/components/badge/index.ts

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

package/src/components/browser-preview/BrowserPreview.module.css

@@ -1,21 +1,12 @@
 .root {
-    box-shadow: var(--mantine-shadow-md);
-    border-radius: var(--mantine-radius-default);
+    border-radius: var(--mantine-radius-lg);
     border: 1px solid;
-    border-color: var(--mantine-color-gray-3);
+    border-color: var(--mantine-color-default-border);
     flex: 1;
-}
-
-.header {
-    box-shadow: var(--mantine-shadow-xs);
-    border-radius: var(--mantine-radius-default) var(--mantine-radius-default) 0 0;
+    overflow: hidden;
 }
 
 .content {
     overflow: auto;
     flex-grow: 1;
 }
-
-.infoIcon {
-    color: var(--mantine-color-gray-5);
-}

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

@@ -1,7 +1,7 @@
-import {InfoSize16Px} from '@coveord/plasma-react-icons';
-import {Box, ColorSwatch, Flex, Group, Stack, StackProps, Text, Title, Tooltip, useMantineTheme} from '@mantine/core';
+import {Flex, Group, Stack, StackProps, Text, Tooltip} from '@mantine/core';
 import cx from 'clsx';
 import {PropsWithChildren} from 'react';
+import {InfoToken} from '../info-token';
 import BrowserPreviewClasses from './BrowserPreview.module.css';
 
 export interface BrowserPreviewProps extends StackProps {
@@ -22,35 +22,27 @@ export const BrowserPreview = ({
     title,
     className,
     ...others
-}: PropsWithChildren<BrowserPreviewProps>) => {
-    const theme = useMantineTheme();
-    return (
-        <Stack className={cx(BrowserPreviewClasses.root, className)} gap={0} maw={544} mih={0} {...others}>
-            <Box>
-                <Group className={BrowserPreviewClasses.header} justify="space-between" px="sm" py="xs" bg="gray.1">
-                    <Group gap="xs">
-                        <Title c="gray.6" order={4}>
-                            Preview
-                        </Title>
-                        {!!headerTooltip && (
-                            <Tooltip label={headerTooltip} position="right" maw={400}>
-                                <InfoSize16Px height={16} className={BrowserPreviewClasses.infoIcon} />
-                            </Tooltip>
-                        )}
-                    </Group>
-                    <Text lineClamp={1} color="gray.6">
-                        {title}
-                    </Text>
-                    <Group gap="xs">
-                        <ColorSwatch color={theme.colors.gray[3]} />
-                        <ColorSwatch color={theme.colors.gray[3]} />
-                        <ColorSwatch color={theme.colors.gray[3]} />
-                    </Group>
-                </Group>
-            </Box>
-            <Flex className={BrowserPreviewClasses.content} p="xl" direction="column">
-                {children}
-            </Flex>
-        </Stack>
-    );
-};
+}: PropsWithChildren<BrowserPreviewProps>) => (
+    <Stack className={cx(BrowserPreviewClasses.root, className)} gap={0} maw={544} mih={0} {...others}>
+        <Group className={BrowserPreviewClasses.header} justify="space-between" p="sm" bg="gray.1" wrap="nowrap">
+            <Group gap="xs" wrap="nowrap">
+                <Text c="dimmed" fz="md" lh="18px">
+                    Preview
+                </Text>
+                {!!headerTooltip && (
+                    <Tooltip label={headerTooltip} position="right" maw={400}>
+                        <InfoToken variant="information" className={BrowserPreviewClasses.infoIcon} />
+                    </Tooltip>
+                )}
+            </Group>
+            {title && (
+                <Text lineClamp={1} c="dimmed" fz="md" lh="18px">
+                    {title}
+                </Text>
+            )}
+        </Group>
+        <Flex className={BrowserPreviewClasses.content} p="lg" direction="column">
+            {children}
+        </Flex>
+    </Stack>
+);

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

@@ -6,16 +6,17 @@ describe('BrowserPreview', () => {
     it('shows no tooltip when none specified', async () => {
         render(<BrowserPreview />);
 
-        expect(screen.queryByRole('img', {name: /info/i})).not.toBeInTheDocument();
+        expect(screen.queryByRole('img', {name: /information/i})).not.toBeInTheDocument();
     });
+
     it('renders the specified text as the header tooltip content', async () => {
         const user = userEvent.setup();
         const headerTooltip = 'This is a custom description.';
 
         render(<BrowserPreview headerTooltip={headerTooltip} />);
 
-        await waitFor(() => screen.findByRole('img', {name: /info/i}));
-        await user.hover(screen.getByRole('img', {name: /info/i}));
+        await waitFor(() => screen.findByRole('img', {name: /information/i}));
+        await user.hover(screen.getByRole('img', {name: /information/i}));
 
         await waitFor(() => expect(screen.getByText(headerTooltip)).toBeVisible());
     });

package/src/components/button/Button.tsx

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

package/src/components/checkbox/CheckboxIcon.tsx

@@ -0,0 +1,14 @@
+import {IconCheck, IconMinus} from '@coveord/plasma-react-icons';
+import {ComponentPropsWithoutRef, FunctionComponent} from 'react';
+
+interface CheckboxIconProps extends ComponentPropsWithoutRef<'svg'> {
+    indeterminate: boolean | undefined;
+}
+
+export const CheckboxIcon: FunctionComponent<CheckboxIconProps> = ({indeterminate, ...others}: CheckboxIconProps) => {
+    if (indeterminate) {
+        return <IconMinus stroke={3} {...others} />;
+    }
+
+    return <IconCheck stroke={3} {...others} />;
+};

package/src/components/checkbox/index.ts

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

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

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

package/src/components/child-form/ChildForm.tsx

@@ -56,7 +56,7 @@ export const ChildForm = polymorphicFactory<ChildFormFactory>((props, ref) => {
 
     return (
         <Collapse ref={ref} {...others} {...getStyles('root')}>
-            <Paper bg="gray.0" p="md" {...getStyles('paper')}>
+            <Paper p="md" {...getStyles('paper')}>
                 {(title || description) && (
                     <Stack gap={0} mb="md">
                         {title && <Title order={5}>{title}</Title>}

package/src/components/chip/Chip.tsx

@@ -0,0 +1,5 @@
+import {ChipFactory, ChipGroup, factory, Chip as MantineChip} from '@mantine/core';
+
+export const Chip = factory<ChipFactory>(({variant: _variant, ...props}, ref) => <MantineChip {...props} ref={ref} />);
+
+Chip.Group = ChipGroup;

package/src/components/chip/index.ts

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

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

@@ -1,35 +1,36 @@
-.editor {
-    border: 1px solid var(--mantine-color-gray-3);
-    border-radius: var(--mantine-radius-default);
+.root {
+    --ce-bg: var(--mantine-color-gray-0);
+    --ce-border-color: var(--mantine-color-default-border);
+
+    border: 1px solid var(--ce-border-color);
+    border-radius: var(--mantine-radius-lg);
     z-index: 1;
     height: 100%;
-    outline-width: thin;
+    background-color: var(--ce-bg);
 
     @mixin light {
-        background-color: var(--mantine-color-white);
+        --ce-bg: var(--mantine-color-gray-0);
     }
 
     @mixin dark {
-        background-color: var(--mantine-color-black);
+        --ce-bg: var(--mantine-color-black);
     }
 }
 
-.valid {
-    outline-color: auto;
-    outline-style: none;
-}
-
 .error {
-    outline-color: var(--mantine-color-red-6);
-    outline-style: solid;
+    --ce-border-color: var(--mantine-color-error);
 }
 
 .disabled {
     @mixin light {
-        background-color: var(--mantine-color-gray-2);
-    }
+        --ce-bg: var(--mantine-color-gray-1);
+        --ce-border-color: var(--mantine-color-gray-1);
 
-    @mixin dark {
-        background-color: var(--mantine-color-navy-7);
+        :global {
+            .monaco-editor {
+                --vscode-editor-background: var(--ce-bg);
+                --vscode-editorGutter-background: var(--ce-bg);
+            }
+        }
     }
 }

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

@@ -15,7 +15,7 @@ import {
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
 import Editor, {Monaco, loader} from '@monaco-editor/react';
-import {editor as monacoEditor, MarkerSeverity} from 'monaco-editor';
+import {MarkerSeverity, editor as monacoEditor} from 'monaco-editor';
 import {FunctionComponent, useEffect, useRef, useState} from 'react';
 
 import cx from 'clsx';
@@ -48,6 +48,8 @@ interface CodeEditorProps
     onCopy?(): void;
     /** Called whenever the code editor gets the focus */
     onFocus?(): void;
+    /** Ref object that provides access to the editor's functionality */
+    editorHandle?: React.MutableRefObject<monacoEditor.IStandaloneCodeEditor | null>;
     /**
      * The minimal height of the CodeEditor (label and description included)
      *
@@ -108,6 +110,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         disabled,
         monacoLoader,
         options: {tabSize} = {tabSize: 2},
+        editorHandle,
         ...others
     } = useProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
@@ -119,6 +122,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     });
     const [parentHeight, ref] = useParentHeight();
     const editorRef = useRef(null);
+
     const loadLocalMonaco = async () => {
         const monacoInstance = await import('monaco-editor');
         loader.config({monaco: monacoInstance});
@@ -132,20 +136,12 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     };
 
     const registerThemes = (monaco: Monaco) => {
-        monaco.editor.defineTheme('light-disabled', {
+        monaco.editor.defineTheme('light', {
             base: 'vs',
             inherit: true,
             rules: [],
             colors: {
-                'editor.background': theme.colors.gray[2],
-            },
-        });
-        monaco.editor.defineTheme('vs-dark-disabled', {
-            base: 'vs-dark',
-            inherit: true,
-            rules: [],
-            colors: {
-                'editor.background': theme.colors.navy[7],
+                'editor.background': theme.colors.gray[0],
             },
         });
     };
@@ -163,7 +159,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
 
     hasMonacoErrorRef.current = hasMonacoError;
 
-    const renderErrorOutline = !!error || hasMonacoError;
+    const hasError = !!error || hasMonacoError;
     const theme = useMantineTheme();
     const {colorScheme} = useMantineColorScheme();
 
@@ -189,24 +185,18 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         <Input.Description {...descriptionProps}>{description}</Input.Description>
     ) : null;
 
-    const _error = error ? (
-        <Input.Error mt="xs" {...errorProps}>
-            {error}
-        </Input.Error>
-    ) : (
-        <Space h="xs" />
-    );
+    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : <Space h="sm" />;
 
     const _header =
         _label || _description ? (
-            <Box>
+            <Stack gap="xxs">
                 {_label}
                 {_description}
-            </Box>
+            </Stack>
         ) : null;
 
     const _buttons = (
-        <Group justify="right" gap={0}>
+        <Group justify="right" gap="xs">
             <Search handleSearch={handleSearch} />
             <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />
         </Group>
@@ -221,9 +211,8 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
             p="md"
             pl="xs"
             className={cx(
-                CodeEditorClasses.editor,
-                {[CodeEditorClasses.valid]: !renderErrorOutline},
-                {[CodeEditorClasses.error]: renderErrorOutline},
+                CodeEditorClasses.root,
+                {[CodeEditorClasses.error]: hasError},
                 {[CodeEditorClasses.disabled]: disabled},
             )}
             data-testid="editor-wrapper"
@@ -239,14 +228,20 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                     formatOnPaste: true,
                     fontSize: px(theme.fontSizes.xs) as number,
                     readOnly: disabled,
+                    stickyScroll: {enabled: false},
                     tabSize,
                 }}
                 value={_value}
                 onChange={handleChange}
-                onMount={(editor, monaco) => {
-                    editorRef.current = editor;
+                beforeMount={(monaco) => {
                     registerLanguages(monaco);
                     registerThemes(monaco);
+                }}
+                onMount={(editor) => {
+                    editorRef.current = editor;
+                    if (editorHandle) {
+                        editorHandle.current = editor;
+                    }
                     editor.onDidFocusEditorText(() => onFocus?.());
                     editor.onDidBlurEditorText(async () => {
                         // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that
@@ -266,9 +261,18 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     );
 
     return (
-        <Stack justify="flex-start" gap={0} h={Math.max(parentHeight, minHeight)} mah={maxHeight} ref={ref} {...others}>
-            {_header}
-            {_buttons}
+        <Stack
+            justify="flex-start"
+            gap="sm"
+            h={Math.max(parentHeight, minHeight)}
+            mah={maxHeight}
+            ref={ref}
+            {...others}
+        >
+            <Group justify="space-between">
+                {_header}
+                {_buttons}
+            </Group>
             {_editor}
             {_error}
         </Stack>

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

@@ -1,6 +1,8 @@
 import {useForm} from '@mantine/form';
 import {loader} from '@monaco-editor/react';
 import {render, screen, userEvent, waitForElementToBeRemoved} from '@test-utils';
+import type {editor} from 'monaco-editor';
+import {useRef} from 'react';
 import {CodeEditor} from '../CodeEditor';
 import {XML} from '../languages/xml';
 
@@ -40,7 +42,7 @@ describe('CodeEditor', () => {
         await waitForElementToBeRemoved(screen.queryByRole('presentation'));
 
         expect(screen.getByText(/invalid configuration/i)).toBeInTheDocument();
-        expect(screen.getByTestId('editor-wrapper')).toHaveStyle('outline-color: #cd2113');
+        expect(screen.getByTestId('editor-wrapper')).toHaveStyle('border-color: #cd2113');
     });
 
     it('loads the monaco editor files from node_modules when monacoLoader prop is "local"', async () => {
@@ -88,4 +90,18 @@ describe('CodeEditor', () => {
 
         expect(onSearchSpy).toHaveBeenCalledTimes(1);
     });
+
+    it('defines editorHandle on mount', async () => {
+        let editorHandle: React.MutableRefObject<editor.IStandaloneCodeEditor> = null;
+        const EditorWrapper = () => {
+            editorHandle = useRef<editor.IStandaloneCodeEditor | null>(null);
+            return <CodeEditor editorHandle={editorHandle} />;
+        };
+
+        render(<EditorWrapper />);
+
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
+
+        expect(editorHandle.current).not.toBeNull();
+    });
 });

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

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

package/src/components/collection/Collection.module.css

@@ -2,6 +2,13 @@
     position: relative;
 }
 
+.items {
+    background-color: var(--mantine-color-gray-light);
+    padding: var(--mantine-spacing-md);
+    border: 1px solid var(--mantine-color-default-border);
+    border-radius: var(--mantine-radius-default);
+}
+
 .item {
     align-items: baseline;