Repository: strapi/strapi
File: packages/core/admin/admin/src/components/UnstableGuidedTour/Step.tsx (TypeScript)

Code before:
          props.children
        ) : (
          <Typography tag="div" variant="omega" fontWeight="bold">
            <FormattedMessage tagName="h1" id={props.id} defaultMessage={props.defaultMessage} />
          </Typography>
        )}
      </Box>
    );
  },

  Content: ({ withArrow = true, ...restProps }) => (
    <>
      <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width="100%">
        {'children' in restProps ? (
          restProps.children
        ) : (
          <Typography tag="div" variant="omega">
            <FormattedMessage
              tagName="p"
              id={restProps.id}
              defaultMessage={restProps.defaultMessage}
            />
          </Typography>
        )}
      </Box>
      {withArrow && <PopoverArrow />}
    </>
  ),

  Actions: ({ showStepCount = true, showSkip = false, to, ...props }) => {
    const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);
    const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);
    const currentStep = state.tours[tourName].currentStep + 1;
    // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
    const displayedLength = state.tours[tourName].length - 1;

    return (
      <ActionsContainer width="100%" padding={3} paddingLeft={5}>
        {'children' in props ? (
          props.children
        ) : (
          <Flex flex={1} justifyContent={showStepCount ? 'space-between' : 'flex-end'}>
            {showStepCount && (
              <Typography variant="omega" fontSize="12px">
                <FormattedMessage
                  id="tours.stepCount"
                  defaultMessage="Step {currentStep} of {tourLength}"
                  values={{ currentStep, tourLength: displayedLength }}
                />
              </Typography>
            )}

Review comment (suggestion):
This is fine, but I think I prefer it in Popover.Root because that is actually the Popover wrapping title, content, and actions. With the props on content it's not that clear where the arrow will be applied. 

Code after:
              height="25"
              viewBox="0 0 23 25"
              fill="none"
            >
              <path d="M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z" />
            </svg>
          </PopoverArrow>
        )}
        <Flex width="360px" direction="column" alignItems="start">
          {props.children}
        </Flex>
      </Popover.Content>
    );
  }),

  Title: (props) => {
    return (
      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width="100%">
        {'children' in props ? (
          props.children
        ) : (
          <Typography tag="div" variant="omega" fontWeight="bold">
            <FormattedMessage tagName="h1" id={props.id} defaultMessage={props.defaultMessage} />
          </Typography>
        )}
      </Box>
    );
  },

  Content: (props) => (
    <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width="100%">
      {'children' in props ? (
        props.children
      ) : (
        <Typography tag="div" variant="omega">
          <FormattedMessage tagName="p" id={props.id} defaultMessage={props.defaultMessage} />
        </Typography>
      )}
    </Box>
  ),

  Actions: ({ showStepCount = true, showSkip = false, to, ...props }) => {
    const dispatch = unstableUseGuidedTour('GuidedTourPopover', (s) => s.dispatch);
    const state = unstableUseGuidedTour('GuidedTourPopover', (s) => s.state);
    const currentStep = state.tours[tourName].currentStep + 1;
    // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
    const displayedLength = state.tours[tourName].length - 1;

    return (
      <ActionsContainer width="100%" padding={3} paddingLeft={5}>
        {'children' in props ? (