fix(colorpickers): prevent arrow from positioning over a ColorSwatchDialog tooltip (#1927)

Author: jzempel

packages/avatars/demo/avatar.stories.mdx

@@ -22,7 +22,7 @@ import README from '../README.md';
     args={{ type: TYPE[1] }}
     argTypes={{
       backgroundColor: { control: 'color' },
-      badge: { control: 'number' },
+      badge: { control: 'text' },
       foregroundColor: { control: 'color' },
       children: { control: 'text', table: { category: 'Avatar.Text' } },
       type: {

packages/colorpickers/src/elements/ColorSwatch/index.tsx

@@ -137,7 +137,7 @@ export const ColorSwatch = forwardRef<HTMLTableElement, IColorSwatchProps>(
                 return (
                   <StyledCell key={value} role={role}>
                     <StyledColorSwatchLabel $backgroundColor={value}>
-                      <Tooltip content={label}>
+                      <Tooltip content={label} zIndex={1}>
                         <StyledColorSwatchInput
                           aria-label={label}
                           name={name}