What does this PR do?

Upgrade to use styled components v6

Styled components that are styling native html components are now using withConfig(styledComponentsConfig). styledComponentsConfig is defined in utils/styles.js. The config filters out any props that are not recognized as native html props. For styled components that are styling Grommet components we are not filtering out anything and letting all props pass through. Each Grommet component eventually gets rendered as a native html element and this is where we want the prop filtering to occur, not before then.

Stylis selector patterns require a prepended & or &&. I made this adjustment in some files. See StyledCheckBox.js as an example. Styled components documentation on this:
https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

Where should the reviewer start?

What testing has been done on this PR?

Tested that @container works with this approach
Tested with the following story and compared to how this is currently working in grommet (see codesandbox)

import React from 'react';
import styled from 'styled-components';
import { Box } from 'grommet';

const CustomBox = styled(Box)`
  padding: 10px;
`;

export const SimpleBox = () => (
  <>
    <CustomBox forwardedAs="span" background="pink" border>
      box content
    </CustomBox>
    <Box as="span" border>
      regular box
    </Box>
  </>
);

SimpleBox.storyName = 'Simple';

export default {
  title: 'Layout/Box/Simple',
};

How should this be manually tested?

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• userEvent is used in place of fireEvent.
• asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Should this PR be mentioned in the release notes?

Is this change backwards compatible or is it a breaking change?