hunk.code_window:     const name = 'topic-name';
       const topicId = 'topic-id';
       const pageSize = 20;
       const mockedResponse = {
         totalCount: 1,
         pageSize,
         page: 0,
         data: [
           {
             _id: 'topic-id',
             _environmentId: 'environment-id',
             _organizationId: 'organization-id',
             key,
             name,
             subscribers: ['subscriber-id-1', 'subscriber-id-2'],
           },
         ],
       };
       mockedAxios.get.mockResolvedValue(mockedResponse);
       const result = await novu.topics.list({ page: 0, pageSize });
  
hunk.labels: keep keep keep keep keep replace replace replace replace replace replace replace replace replace replace replace replace replace keep keep keep keep
hunk.after_edit:       data: {
           totalCount: 1,
           pageSize,
           page: 0,
           data: [
             {
               _id: 'topic-id',
               _environmentId: 'environment-id',
               _organizationId: 'organization-id',
               key,
               name,
               subscribers: ['subscriber-id-1', 'subscriber-id-2'],
             },
           ],
         },
  
hunk.file_path: packages/node/src/lib/topics/topics.spec.ts
hunk.type: replace
file: import React, { FC, useMemo } from 'react';
  import {
    Box,
    Select as MantineSelect,
    SelectProps,
    MultiSelect as MantineMultiSelect,
    CloseButton,
    InputBaseProps,
    MultiSelectValueProps,
    useMantineTheme,
    SelectItem,
    Loader,
  } from '@mantine/core';
  import styled from '@emotion/styled';
  import useStyles from './Select.styles';
  import { inputStyles } from '../config/inputs.styles';
  import { ArrowDown } from '../icons';
  import { colors } from '../config';
  import { Text } from '../index';
  import { SpacingProps } from '../shared/spacing.props';
  
  interface ISelectProps extends SpacingProps {
    data: (string | { value: string; label?: string } | SelectItem)[];
    value?: string[] | string | null;
    onChange?: (value: string[] | string | null) => void;
    label?: React.ReactNode;
    error?: React.ReactNode;
    itemComponent?: FC<any>;
    placeholder?: string;
    description?: string;
    getCreateLabel?: (query: string) => React.ReactNode;
    onDropdownOpen?: () => void;
    onSearchChange?: (query: string) => void;
    onCreate?: SelectProps['onCreate'];
    searchable?: boolean;
    creatable?: boolean;
    disabled?: boolean;
    required?: boolean;
    loading?: boolean;
    type?: 'multiselect' | 'select';
    filter?: (value: string, item: SelectItem) => boolean;
    allowDeselect?: boolean;
    dataTestId?: string;
  }
  
  /**
   * Select component
   *
   */
  export const Select = React.forwardRef<HTMLInputElement, ISelectProps>(
    (
      {
        data,
        type = 'select',
        value,
        filter,
        searchable = false,
        creatable = false,
        loading = false,
        disabled = false,
        required = false,
        onChange,
        ...props
      }: ISelectProps,
      ref
    ) => {
      const { classes, theme } = useStyles();
      const searchableSelectProps = searchable
        ? {
            searchable,
            nothingFound: 'Nothing Found',
            clearable: true,
          }
        : {};
      const defaultDesign = {
        radius: 'md',
        size: 'md',
        rightSection: <ArrowDown />,
        rightSectionWidth: 50,
        styles: inputStyles,
        classNames: classes,
      } as InputBaseProps;
      const multiselect = type === 'multiselect';
  
      let filterResults: ((value: string, item: SelectItem) => boolean) | undefined = filter;
  
      if (creatable && !filter) {
        filterResults = (currentValue, _) => {
          const isEmptyValue = !currentValue;
          const includedInExistingGroups = !!data.find((group) => {
            return (group as SelectItem)?.label?.toLowerCase().includes(currentValue.toLowerCase());
          });
          const showAllOptionsInSelect = isEmptyValue || includedInExistingGroups;
  
          return showAllOptionsInSelect;
        };
      }
  
      const loadingProps = useMemo(() => {
        const loadingStyle = { ...inputStyles(theme), ...{ rightSection: { width: '100%' } } };
  
        return loading
          ? {
              rightSection: <Loader color={colors.B70} size={32} />,
              styles: loadingStyle,
              value: undefined,
              placeholder: '',
              disabled: true,
            }
          : {};
      }, [loading, theme]);
  
      return (
        <Wrapper style={{ position: 'relative' }}>
          {multiselect ? (
            <MantineMultiSelect
              ref={ref}
              onChange={onChange}
              autoComplete="nope"
              value={value as string[] | undefined}
              {...defaultDesign}
              {...searchableSelectProps}
              creatable={creatable}
              data={data}
              disabled={disabled}
              required={required}
              valueComponent={Value}
              {...props}
              {...loadingProps}
            />
          ) : (
            <MantineSelect
              ref={ref}
              value={value as string | undefined}
              autoComplete="nope"
              {...defaultDesign}
              {...searchableSelectProps}
              creatable={creatable}
              disabled={disabled}
              filter={filterResults}
              onChange={onChange}
              data={data}
              required={required}
              {...props}
              {...loadingProps}
            />
          )}
        </Wrapper>
      );
    }
  );
  
  function Value({ label, onRemove }: MultiSelectValueProps) {
    const theme = useMantineTheme();
    const dark = theme.colorScheme === 'dark';
    const backgroundColor = dark ? theme.colors.dark[4] : theme.colors.gray[0];
    const color = dark ? theme.colors.dark[3] : theme.colors.gray[5];
  
    return (
      <Box
        sx={{
          alignItems: 'center',
          display: 'flex',
          borderRadius: '5px',
          backgroundColor,
          margin: '5px',
        }}
      >
        <div
          style={{
            margin: '6.5px 0px 6.5px 10px',
            lineHeight: '20px',
            maxWidth: '80px',
            fontSize: 14,
            fontWeight: 400,
          }}
        >
          <Text rows={1}>{label}</Text>
        </div>
        <CloseButton style={{ color }} onMouseDown={onRemove} variant="transparent" size={30} iconSize={15} />
      </Box>
    );
  }
  
  const Wrapper = styled.div`
    .mantine-MultiSelect-values {
      min-height: 48px;
      padding: 0;
    }
  
    .mantine-MultiSelect-input {
      min-height: 50px;
  
      input {
        height: 100%;
      }
    }
  `;
  