Global Styles: use color slug as key in the Palette component color i…

…ndicator (#44344)

* use slug as color indicator key in gs palette

In the global styles panel's palette component, the color's hex code is
used as a `key` for the ColorIndicatorWrapper, but the hex is not
necessarily a unique identifier, unlike the `slug` attribute, which could be
expected to be unique, at least by usage; discussion around improving 
handling of duplicate color in the palette [here](#43197).

Composing the color + index of the element in the array, using it as an index, keeps these error messages away:

> Warning: Encountered two children with the same key, `.$#040DE1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

with a palette that looks lilke this:

```json
[
	{
			"color": "#040DE1",
			"name": "Primary",
			"slug": "primary"
	},
	{
			"color": "#040DE1",
			"name": "Foreground",
			"slug": "foreground"
	},
]

```

* compose color, index as color indicator key

packages/edit-site/src/components/global-styles/palette.js

@@ -68,11 +68,15 @@ function Palette( { name } ) {
 						}
 					>
 						<ZStack isLayered={ false } offset={ -8 }>
-							{ colors.slice( 0, 5 ).map( ( { color } ) => (
-								<ColorIndicatorWrapper key={ color }>
-									<ColorIndicator colorValue={ color } />
-								</ColorIndicatorWrapper>
-							) ) }
+							{ colors
+								.slice( 0, 5 )
+								.map( ( { color }, index ) => (
+									<ColorIndicatorWrapper
+										key={ `${ color }-${ index }` }
+									>
+										<ColorIndicator colorValue={ color } />
+									</ColorIndicatorWrapper>
+								) ) }
 						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>