@bitrise/bitkit 12.83.0 → 12.84.0

package/src/Components/Tabs/Tabs.theme.ts

@@ -3,93 +3,93 @@ import { defineStyle, defineStyleConfig, SystemStyleObject } from '@chakra-ui/st
 const baseStyle = defineStyle(
   ({ variant }): SystemStyleObject => ({
     containedTab: {
-      backgroundColor: 'neutral.93',
-      paddingX: '16',
-      paddingY: '12',
-      color: 'neutral.40',
-      textAlign: 'left',
-      whiteSpace: 'nowrap',
-      boxShadow: 'inset 1px 0 0 var(--colors-neutral-80)',
-      _selected: {
-        backgroundColor: 'neutral.100',
-        borderRight: 0,
-        boxShadow: 'inset 0 2px var(--colors-purple-50)',
-        div: {
-          color: 'purple.50',
-        },
-        _first: {
-          boxShadow: 'inset 0 2px var(--colors-purple-50)',
-        },
-        '+ [role="tab"]': {
-          boxShadow: 'none',
-        },
+      _disabled: {
         _hover: {
-          backgroundColor: 'neutral.100',
+          backgroundColor: 'neutral.90',
         },
-      },
-      _disabled: {
         backgroundColor: 'neutral.90',
         color: 'neutral.60',
         cursor: 'not-allowed',
-        _hover: {
-          backgroundColor: 'neutral.90',
-        },
-      },
-      _hover: {
-        backgroundColor: 'neutral.95',
-      },
-      _focusVisible: {
-        boxShadow: 'inset 0 2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
       },
       _first: {
-        boxShadow: 'none',
         _focusVisible: {
           boxShadow: 'inset 0 2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
         },
+        boxShadow: 'none',
       },
-    },
-    lineTab: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      fontSize: '3',
-      gap: '8',
-      lineHeight: '1.5rem',
-      paddingX: '16',
-      paddingY: '12',
-      color: 'neutral.50',
-      fontWeight: 'bold',
-      whiteSpace: 'nowrap',
-      _selected: {
-        color: 'purple.50',
-        boxShadow: 'inset 0 -2px var(--colors-purple-50)',
-        _hover: {
-          backgroundColor: 'transparent',
-        },
+      _focusVisible: {
+        boxShadow: 'inset 0 2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
       },
       _hover: {
         backgroundColor: 'neutral.95',
       },
+      _selected: {
+        '+ [role="tab"]': {
+          boxShadow: 'none',
+        },
+        _first: {
+          boxShadow: 'inset 0 2px var(--colors-purple-50)',
+        },
+        _hover: {
+          backgroundColor: 'neutral.100',
+        },
+        backgroundColor: 'neutral.100',
+        borderRight: 0,
+        boxShadow: 'inset 0 2px var(--colors-purple-50)',
+        div: {
+          color: 'purple.50',
+        },
+      },
+      backgroundColor: 'neutral.93',
+      boxShadow: 'inset 1px 0 0 var(--colors-neutral-80)',
+      color: 'neutral.40',
+      paddingX: '16',
+      paddingY: '12',
+      textAlign: 'left',
+      whiteSpace: 'nowrap',
+    },
+    lineTab: {
       _active: {
         backgroundColor: 'neutral.93',
       },
       _disabled: {
-        color: 'neutral.70',
-        cursor: 'not-allowed',
         _hover: {
           background: 'transparent',
         },
+        color: 'neutral.70',
+        cursor: 'not-allowed',
       },
       _focusVisible: {
         boxShadow: 'inset 0 -2px var(--colors-purple-50), inset 0 0 0 3px var(--colors-purple-70)',
       },
+      _hover: {
+        backgroundColor: 'neutral.95',
+      },
+      _selected: {
+        _hover: {
+          backgroundColor: 'transparent',
+        },
+        boxShadow: 'inset 0 -2px var(--colors-purple-50)',
+        color: 'purple.50',
+      },
+      alignItems: 'center',
+      color: 'neutral.50',
+      display: 'flex',
+      fontSize: '3',
+      fontWeight: 'bold',
+      gap: '8',
+      justifyContent: 'flex-start',
+      lineHeight: '1.5rem',
+      paddingX: '16',
+      paddingY: '12',
+      whiteSpace: 'nowrap',
     },
     tablist: {
+      borderBottom: variant === 'line' ? '1px solid' : undefined,
+      borderBottomColor: variant === 'line' ? 'separator.primary' : undefined,
       maxWidth: '100%',
       overflow: 'hidden',
       paddingLeft: variant === 'contained' ? '16' : undefined,
-      borderBottom: variant === 'line' ? '1px solid' : undefined,
-      borderBottomColor: variant === 'line' ? 'separator.primary' : undefined,
     },
     tabpanel: {
       _focusVisible: {

package/src/Components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
-import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, Tabs as ChakraTabs, TabsProps as ChakraTabsProps } from '@chakra-ui/react';
 import { useHistory } from '../../hooks';
 
 export interface TabsProps extends ChakraTabsProps {
@@ -85,7 +85,7 @@ const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
     }
   }, [tabId]);
 
-  return <ChakraTabs {...rest} variant={variant} ref={ref} onChange={onTabChange} index={actualIndex} />;
+  return <ChakraTabs {...rest} ref={ref} index={actualIndex} onChange={onTabChange} variant={variant} />;
 });
 
 export default Tabs;

package/src/Components/Tag/Tag.theme.ts

@@ -11,31 +11,16 @@ const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpe
 ]);
 
 const sizes = {
-  sm: definePartsStyle((props) => {
-    const { onClose, iconName, withIcon } = props as TagProps;
+  md: definePartsStyle((props) => {
+    const { iconName, onClose, withIcon } = props as TagProps;
     const leftIcon = iconName || withIcon;
 
     return {
-      container: {
-        paddingLeft: leftIcon ? rem(4) : rem(8),
-        paddingRight: onClose ? rem(2) : rem(8),
-        paddingY: onClose ? rem(2) : rem(4),
-      },
-      label: {
-        fontSize: rem(12),
-        lineHeight: rem(16),
-      },
       closeButton: {
-        height: '20',
-        width: '20',
+        height: '24',
+        marginLeft: '8',
+        width: '24',
       },
-    };
-  }),
-  md: definePartsStyle((props) => {
-    const { onClose, iconName, withIcon } = props as TagProps;
-    const leftIcon = iconName || withIcon;
-
-    return {
       container: {
         paddingLeft: leftIcon ? rem(6) : rem(12),
         paddingRight: onClose ? rem(4) : rem(12),
@@ -45,10 +30,25 @@ const sizes = {
         fontSize: '2',
         lineHeight: rem(20),
       },
+    };
+  }),
+  sm: definePartsStyle((props) => {
+    const { iconName, onClose, withIcon } = props as TagProps;
+    const leftIcon = iconName || withIcon;
+
+    return {
       closeButton: {
-        height: '24',
-        width: '24',
-        marginLeft: '8',
+        height: '20',
+        width: '20',
+      },
+      container: {
+        paddingLeft: leftIcon ? rem(4) : rem(8),
+        paddingRight: onClose ? rem(2) : rem(8),
+        paddingY: onClose ? rem(2) : rem(4),
+      },
+      label: {
+        fontSize: rem(12),
+        lineHeight: rem(16),
       },
     };
   }),
@@ -56,27 +56,40 @@ const sizes = {
 
 const baseStyle = definePartsStyle(({ colorScheme }) => {
   const scheme = {
-    color: `${colorScheme}.40`,
     backgroundColor: `${colorScheme}.93`,
     borderColor: `${colorScheme}.80`,
+    color: `${colorScheme}.40`,
   };
 
   return {
+    closeButton: {
+      _disabled: {
+        pointerEvents: 'none',
+      },
+      _focus: {
+        boxShadow: '0 0 0 1px var(--colors-purple-70) inset',
+      },
+      _hover: {
+        backgroundColor: `${colorScheme}.90`,
+      },
+      borderRadius: rem(2),
+      marginInlineStart: '4',
+    },
     container: {
       border: '1px solid',
       borderRadius: '4',
       ...scheme,
       _disabled: {
-        cursor: 'not-allowed',
         backgroundColor: 'neutral.95',
         borderColor: 'neutral.90',
         color: 'neutral.80',
+        cursor: 'not-allowed',
       },
       _loading: {
-        cursor: 'wait',
         backgroundColor: 'neutral.93',
         borderColor: 'neutral.93',
         color: 'neutral.60',
+        cursor: 'wait',
       },
     },
     icon: {
@@ -85,23 +98,10 @@ const baseStyle = definePartsStyle(({ colorScheme }) => {
     label: {
       display: 'inline',
     },
-    closeButton: {
-      marginInlineStart: '4',
-      borderRadius: rem(2),
-      _hover: {
-        backgroundColor: `${colorScheme}.90`,
-      },
-      _focus: {
-        boxShadow: '0 0 0 1px var(--colors-purple-70) inset',
-      },
-      _disabled: {
-        pointerEvents: 'none',
-      },
-    },
     skeleton: {
-      minWidth: '32',
-      height: '8',
       backgroundColor: 'neutral.80',
+      height: '8',
+      minWidth: '32',
     },
   };
 });

package/src/Components/Tag/Tag.tsx

@@ -25,19 +25,19 @@ const Tag = (props: TagProps) => {
 
   return (
     <ChakraTag
+      aria-busy={isLoading}
       aria-disabled={isDisabled}
       data-disabled={isDisabled || undefined}
-      aria-busy={isLoading}
       data-loading={isLoading || undefined}
       sx={style.container}
       {...tagProps}
     >
       {(withIcon || !!iconName) && (
         <Icon
+          __css={style.icon}
           color={iconColor}
           name={iconName || 'Tick'}
           size={tagProps.size === 'sm' ? '16' : '24'}
-          __css={style.icon}
         />
       )}
       <Text as="span" hasEllipsis sx={style.label}>

package/src/Components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import { Text as ChakraText, TextProps as ChakraTextProps, forwardRef, ResponsiveValue } from '@chakra-ui/react';
+import { forwardRef, ResponsiveValue, Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 export interface TextProps extends ChakraTextProps {
@@ -17,7 +17,7 @@ export interface TextProps extends ChakraTextProps {
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
 const Text = forwardRef<TextProps, 'p'>((props, ref) => {
-  const { fontWeight, size, textTransform, hasEllipsis, ...rest } = props;
+  const { fontWeight, hasEllipsis, size, textTransform, ...rest } = props;
   const properties: ChakraTextProps = { fontWeight, size, textTransform, ...rest };
   if (size === '1' && (!textTransform || textTransform === 'none')) {
     properties.textTransform = 'uppercase';

package/src/Components/Toast/Toast.tsx

@@ -1,4 +1,4 @@
-import { useToast as useChakraToast, UseToastOptions, AlertTitle, AlertDescription } from '@chakra-ui/react';
+import { AlertDescription, AlertTitle, useToast as useChakraToast, UseToastOptions } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
 import Box from '../Box/Box';
 import Notification, { ActionProps, NotificationAction, NotificationProps } from '../Notification/Notification';
@@ -22,21 +22,21 @@ const useToast = () => {
       timestamp = DateTime.now().toFormat('hh:mm:ssa');
     }
     toast({
-      isClosable: opts.isClosable,
       duration: opts.duration,
+      isClosable: opts.isClosable,
       position: opts.position || 'top-right',
       render: ({ onClose }) => (
         <Notification
           boxShadow="large"
           maxW="437px"
-          status={opts.status || 'info'}
           onClose={opts.isClosable ? onClose : undefined}
+          status={opts.status || 'info'}
         >
           <Box display="flex" flexDirection="column">
             <AlertTitle>{opts.title}</AlertTitle>
             {opts.description && <AlertDescription>{opts.description}</AlertDescription>}
             {!opts.action && timestamp && <AlertDescription marginTop="8">{timestamp}</AlertDescription>}
-            {opts.action && <NotificationAction alignSelf="start" marginTop="8" marginBottom="4" {...opts.action} />}
+            {opts.action && <NotificationAction alignSelf="start" marginBottom="4" marginTop="8" {...opts.action} />}
           </Box>
         </Notification>
       ),

package/src/Components/Toggle/Toggle.theme.ts

@@ -3,85 +3,85 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
 const ToggleTheme: ComponentStyleConfig = {
   baseStyle: ({ withTooltip }) => {
     return {
+      label: {
+        fontSize: '3',
+        fontWeight: 'normal',
+        lineHeight: '1.5rem',
+        marginBottom: 0,
+      },
       labelWrapper: {
         display: 'flex',
         gap: '8',
         paddingInlineEnd: withTooltip ? '4' : undefined,
         width: withTooltip ? 'fit-content' : undefined,
       },
-      track: {
-        boxSizing: 'border-box',
-        width: '48',
-        height: '24',
-        padding: '0.125rem',
-        backgroundColor: 'neutral.50',
-        borderRadius: '12',
-        transition: '100ms',
-        isolation: 'isolate',
-        _disabled: {
-          backgroundColor: 'neutral.93',
-          cursor: 'not-allowed',
-        },
+      spinner: {
+        color: 'neutral.70',
+        flexShrink: 0,
+        height: '16',
+        marginTop: '4',
+        width: '16',
+      },
+      thumb: {
         _checked: {
-          backgroundColor: 'turquoise.70',
-          _disabled: {
-            backgroundColor: 'turquoise.80',
-          },
+          transform: 'translate(24px)',
         },
-        _focusVisible: {
-          boxShadow: 'outline',
+        bgGradient: 'linear(to-b, neutral.93 3.43%, neutral.100 100%)',
+        borderRadius: '24',
+        height: '1.25rem',
+        position: 'relative',
+        transition: '100ms',
+        width: '1.25rem',
+        zIndex: '1',
+      },
+      track: {
+        _after: {
+          backgroundImage:
+            `/* @see: https://github.com/chakra-ui/chakra-ui/issues/7548#issuecomment-1684034030 */` +
+            `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 10.608 16.618 6l1.402 1.402-4.608 4.608 4.608 4.608-1.402 1.402-4.608-4.608-4.608 4.608L6 16.618l4.608-4.608L6 7.402 7.402 6l4.608 4.608Z' fill='white' /%3E%3C/svg%3E"),` +
+            `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 10.608 16.618 6l1.402 1.402-4.608 4.608 4.608 4.608-1.402 1.402-4.608-4.608-4.608 4.608L6 16.618l4.608-4.608L6 7.402 7.402 6l4.608 4.608Z' fill='white' /%3E%3C/svg%3E")`,
+          backgroundPositionX: '-0.125rem',
+          bottom: 0,
+          content: '""',
+          left: '50%',
+          position: 'absolute',
+          right: 0,
+          top: 0,
         },
         _before: {
-          content: '""',
           backgroundImage:
             `/* @see: https://github.com/chakra-ui/chakra-ui/issues/7548#issuecomment-1684034030 */` +
             `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.213 13.915 17.234 7l1.49 1.49L10.212 17 5 11.68l1.49-1.489 3.723 3.724Z' fill='white' /%3E%3C/svg%3E"),` +
             `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.213 13.915 17.234 7l1.49 1.49L10.212 17 5 11.68l1.49-1.489 3.723 3.724Z' fill='white' /%3E%3C/svg%3E")`,
           backgroundPositionX: '0.125rem',
-          position: 'absolute',
-          left: 0,
-          right: '50%',
-          top: 0,
           bottom: 0,
-        },
-        _after: {
           content: '""',
-          backgroundImage:
-            `/* @see: https://github.com/chakra-ui/chakra-ui/issues/7548#issuecomment-1684034030 */` +
-            `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 10.608 16.618 6l1.402 1.402-4.608 4.608 4.608 4.608-1.402 1.402-4.608-4.608-4.608 4.608L6 16.618l4.608-4.608L6 7.402 7.402 6l4.608 4.608Z' fill='white' /%3E%3C/svg%3E"),` +
-            `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.01 10.608 16.618 6l1.402 1.402-4.608 4.608 4.608 4.608-1.402 1.402-4.608-4.608-4.608 4.608L6 16.618l4.608-4.608L6 7.402 7.402 6l4.608 4.608Z' fill='white' /%3E%3C/svg%3E")`,
-          backgroundPositionX: '-0.125rem',
+          left: 0,
           position: 'absolute',
-          left: '50%',
-          right: 0,
+          right: '50%',
           top: 0,
-          bottom: 0,
         },
-      },
-      thumb: {
-        position: 'relative',
-        zIndex: '1',
-        width: '1.25rem',
-        height: '1.25rem',
-        borderRadius: '24',
-        bgGradient: 'linear(to-b, neutral.93 3.43%, neutral.100 100%)',
-        transition: '100ms',
         _checked: {
-          transform: 'translate(24px)',
+          _disabled: {
+            backgroundColor: 'turquoise.80',
+          },
+          backgroundColor: 'turquoise.70',
         },
-      },
-      label: {
-        fontSize: '3',
-        fontWeight: 'normal',
-        lineHeight: '1.5rem',
-        marginBottom: 0,
-      },
-      spinner: {
-        width: '16',
-        height: '16',
-        marginTop: '4',
-        flexShrink: 0,
-        color: 'neutral.70',
+        _disabled: {
+          backgroundColor: 'neutral.93',
+          cursor: 'not-allowed',
+        },
+        _focusVisible: {
+          boxShadow: 'outline',
+        },
+        backgroundColor: 'neutral.50',
+        borderRadius: '12',
+        boxSizing: 'border-box',
+        height: '24',
+        isolation: 'isolate',
+        padding: '0.125rem',
+        transition: '100ms',
+        width: '48',
       },
     };
   },

package/src/Components/Toggle/Toggle.tsx

@@ -5,9 +5,9 @@ import {
   FormErrorMessage,
   FormHelperText,
   FormLabel,
+  forwardRef,
   Switch,
   SwitchProps,
-  forwardRef,
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
@@ -43,8 +43,8 @@ const Toggle = forwardRef<ToggleProps, 'div'>((props, ref) => {
     helperText,
     id,
     isChecked,
-    isInvalid,
     isDisabled,
+    isInvalid,
     isLoading,
     label,
     name,

package/src/Components/Toggletip/Toggletip.theme.ts

@@ -6,15 +6,15 @@ const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['content', 'tr
 const Toggletip = defineMultiStyleConfig({
   baseStyle: {
     content: {
-      padding: '16',
       maxWidth: rem(320),
+      padding: '16',
     },
     link: {
-      color: 'purple.70',
       _hover: {
         color: 'purple.60',
         textDecoration: 'underline',
       },
+      color: 'purple.70',
     },
   },
 });

package/src/Components/Toggletip/Toggletip.tsx

@@ -22,7 +22,7 @@ export type ToggletipProps = Omit<PopoverProps, 'children'> & {
 };
 
 const Toggletip = (props: ToggletipProps) => {
-  const { children, label, learnMoreUrl, button, popoverTrigger, ...rest } = props;
+  const { button, children, label, learnMoreUrl, popoverTrigger, ...rest } = props;
 
   const style = useMultiStyleConfig('Toggletip');
 
@@ -54,9 +54,9 @@ const Toggletip = (props: ToggletipProps) => {
       <PopoverContent sx={style.content}>
         <Text>{label}</Text>
         {(learnMoreUrl || button) && (
-          <Box display="flex" justifyContent={justifyContent} alignItems="center" marginTop="16">
+          <Box alignItems="center" display="flex" justifyContent={justifyContent} marginTop="16">
             {learnMoreUrl && (
-              <Link sx={style.link} href={learnMoreUrl} isExternal>
+              <Link href={learnMoreUrl} isExternal sx={style.link}>
                 Learn more
               </Link>
             )}

package/src/Components/Tooltip/Tooltip.theme.ts

@@ -3,13 +3,13 @@ import type { SystemStyleObject } from '@chakra-ui/theme-tools';
 const TooltipTheme: SystemStyleObject = {
   baseStyle: {
     bg: 'neutral.10',
+    borderRadius: '8',
+    boxShadow: 'tooltip',
     color: 'neutral.95',
     fontSize: '2',
     lineHeight: '1.25rem',
     paddingX: '12',
     paddingY: '8',
-    borderRadius: '8',
-    boxShadow: 'tooltip',
     zIndex: 'tooltip',
   },
 };

package/src/Components/Tooltip/Tooltip.tsx

@@ -1,9 +1,9 @@
 import {
+  BoxProps,
+  chakra,
+  forwardRef,
   Tooltip as ChakraTooltip,
   TooltipProps as ChakraTooltipProps,
-  forwardRef,
-  chakra,
-  BoxProps,
 } from '@chakra-ui/react';
 
 export interface TooltipProps extends Omit<ChakraTooltipProps, 'shouldWrapChildren'> {
@@ -19,13 +19,13 @@ const Tooltip = forwardRef<TooltipProps, 'div'>((props, ref) => {
     bg: 'neutral.10',
     children,
     hasArrow: true,
-    placement: 'top',
     maxWidth: 320,
+    placement: 'top',
     ...rest,
   };
   if (shouldWrapChildren) {
     properties.children = (
-      <chakra.span sx={wrapperProps} display={shouldWrapChildren === 'block' ? 'block' : 'inline-block'} tabIndex={0}>
+      <chakra.span display={shouldWrapChildren === 'block' ? 'block' : 'inline-block'} sx={wrapperProps} tabIndex={0}>
         {children}
       </chakra.span>
     );

package/src/Foundations/Breakpoints/Breakpoints.ts

@@ -1,7 +1,7 @@
 export const BREAKPOINTS = {
+  DESKTOP: 'desktop',
   MOBILE: 'base',
   TABLET: 'tablet',
-  DESKTOP: 'desktop',
   WIDEDESKTOP: 'wideDesktop',
 };
 

package/src/Foundations/Colors/Colors.tsx

@@ -11,9 +11,9 @@ const Colors = () => {
     <Unstyled>
       <Provider>
         <CommonTokens />
-        <Divider marginTop="48" marginBottom="32" size="1" />
+        <Divider marginBottom="32" marginTop="48" size="1" />
         <SystemTokens />
-        <Divider marginTop="48" marginBottom="32" size="1" />
+        <Divider marginBottom="32" marginTop="48" size="1" />
         <Palette />
       </Provider>
     </Unstyled>

package/src/Foundations/Colors/CommonTokens.tsx

@@ -7,12 +7,12 @@ const commonColorKeys = ['background', 'border', 'icon', 'text'];
 
 const CommonTokens = () => (
   <>
-    <Text as="h2" size="8" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8">
+    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
       Common Tokens
     </Text>
     <Card boxShadow="medium" padding="24">
       {commonColorKeys.map((groupName) => (
-        <TokenTable data={semanticTokens.colors[groupName]} groupName={groupName} key={groupName} marginBottom="24" />
+        <TokenTable key={groupName} data={semanticTokens.colors[groupName]} groupName={groupName} marginBottom="24" />
       ))}
     </Card>
   </>