Create v6 Accordion with Styled System

[TyMick]

As a step toward the v6 release (#378), how's this look for replacing the styleOverrides prop in Accordion?

The only property in styleOverrides used in Accordion was panelPadding, which set padding on all nested Accordion.Panels, so here are the main replacements:

1. Added Styled System's variant API to Accordion.Panel to define the default and 'minimal' padding styles, then added the space field to allow overriding padding on individual panels.

   export const Panel = styled(Box).attrs(({ headerId, panelId }) => ({
     role: 'region',
     'aria-labelledby': `accordion-header-${headerId}`,
     id: `accordion-panel-${panelId}`,
   }))(
     variant({
       variants: {
         default: {
           padding: 6,
           paddingTop: 4,
         },
         minimal: {
           padding: 4,
           paddingTop: 0,
         },
       },
     }),
     space,
   );

2. Added a custom panelPadding prop to Accordion, applying its effects only to nested Panels from Accordion.Panel. This way it's still possible to set the padding of all panels at the Accordion level instead of having to set each Accordion.Panel's padding separately.

   const AccordionBox = styled(Box)`
     ${Panel} {
       ${system({
         panelPadding: {
           property: 'padding',
           scale: 'space',
         },
       })}
     }
   `;

---

Should this PR target a new branch instead of master since it's a breaking change, or will v6 be the next release (so it doesn't matter)?

[TyMick]

Come to think of it, should I be creating new files for these new v6 versions with breaking changes (this and #392 so far) instead of contemplating a new branch? I just reread the whole "December 18th - all updated components will be available at the /v6 import" part on #378.

[RobertBolender]

Come to think of it, should I be creating new files for these new v6 versions with breaking changes (this and #392 so far) instead of contemplating a new branch? I just reread the whole "December 18th - all updated components will be available at the /v6 import" part on #378.

The pattern we've been using is to add a new file and export it at the /v6 entrypoint. While we will be making the v6 breaking change soon, we want to keep the v5 versions free of breaking changes until that point so that we're always in a shippable state.

Examples of recent v6 additions:
Popover
Dropdown

[TyMick]

I went with the "legacy" naming scheme, renaming old files to legacy-* and exporting the v5 version from components/accordion as LegacyAccordion.

How's this look?