@bitrise/bitkit 12.118.1-alpha.0 → 12.120.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.118.1-alpha.0",
+  "version": "12.120.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -42,7 +42,7 @@
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.11.1",
+    "react-focus-lock": "^2.10.1",
     "react-imask": "^7.4.0",
     "react-markdown": "^9.0.1"
   },
@@ -58,34 +58,34 @@
     "@bitrise/eslint-plugin": "^2.5.0",
     "@chakra-ui/cli": "^2.4.1",
     "@google-cloud/storage": "^7.7.0",
-    "@storybook/addon-actions": "^7.6.17",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addons": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
-    "@storybook/theming": "^7.6.17",
+    "@storybook/addon-actions": "^7.6.15",
+    "@storybook/addon-essentials": "^7.6.15",
+    "@storybook/addon-interactions": "^7.6.15",
+    "@storybook/addon-links": "^7.6.15",
+    "@storybook/addons": "^7.6.15",
+    "@storybook/blocks": "^7.6.15",
+    "@storybook/react": "^7.6.15",
+    "@storybook/react-webpack5": "^7.6.15",
+    "@storybook/theming": "^7.6.15",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
-    "@types/react": "^18.2.57",
+    "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "axios": "^1.6.7",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jest": "^27.8.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "^6.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
@@ -93,8 +93,8 @@
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
     "react-hook-form": "^7.50.1",
-    "release-it": "^17.1.1",
-    "storybook": "^7.6.17",
+    "release-it": "^17.0.5",
+    "storybook": "^7.6.15",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

package/src/Components/Button/Button.theme.ts

@@ -1,100 +1,150 @@
-/* eslint-disable sort/object-properties */
-import { defineStyle, defineStyleConfig, SystemStyleInterpolation } from '@chakra-ui/styled-system';
-import { rem } from '../../utils/utils';
-import { ButtonProps } from './Button';
-
-const baseStyle = defineStyle({
-  borderRadius: '4',
-});
-
-const sizes = {
-  lg: defineStyle((props) => {
-    return {
-      paddingBlock: rem(11),
-      paddingInlineEnd: props.rightIcon ? rem(11) : rem(15),
-      paddingInlineStart: props.leftIcon ? rem(11) : rem(15),
-      textStyle: 'comp/button/lg',
-      minWidth: 48,
-      minHeight: 48,
-    };
-  }),
-  md: defineStyle((props) => {
-    return {
-      paddingBlock: rem(9),
-      paddingInlineEnd: props.rightIcon ? rem(11) : rem(15),
-      paddingInlineStart: props.leftIcon ? rem(11) : rem(15),
-      textStyle: 'comp/button/md',
-      minWidth: 40,
-      minHeight: 40,
-    };
-  }),
-  sm: defineStyle((props) => {
-    return {
-      paddingBlock: rem(5),
-      paddingInlineEnd: props.rightIcon ? rem(7) : rem(11),
-      paddingInlineStart: props.leftIcon ? rem(7) : rem(11),
-      textStyle: 'comp/button/sm',
-      minWidth: 32,
-      minHeight: 32,
-    };
-  }),
+export const disabledStates = {
+  primary: {
+    _disabled: {
+      bgGradient: 'linear(to-b, neutral.80, neutral.70)',
+      borderColor: 'neutral.70',
+    },
+  },
+  secondary: {
+    _disabled: {
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      borderColor: 'neutral.90',
+      color: 'neutral.70',
+    },
+  },
+  tertiary: {
+    _disabled: {
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'neutral.70',
+    },
+  },
 };
 
-const variants = (
-  [
-    'primary',
-    'secondary',
-    'tertiary',
-    'danger-primary',
-    'danger-secondary',
-    'danger-tertiary',
-  ] as ButtonProps['variant'][]
-).reduce(
-  (obj, variant) => {
-    let borderColor = variant?.includes('secondary') ? `button/${variant}/border` : `button/${variant}/bg`;
-    let disabledBorderColor = variant?.includes('secondary')
-      ? `button/${variant}/border-disabled`
-      : `button/${variant}/bg-disabled`;
-    if (variant?.includes('tertiary')) {
-      borderColor = 'transparent';
-      disabledBorderColor = 'transparent';
-    }
-    obj[variant as NonNullable<ButtonProps['variant']>] = defineStyle({
+const ButtonTheme = {
+  baseStyle: {
+    _disabled: {
+      cursor: 'not-allowed',
+    },
+    _hover: {
+      _disabled: {
+        bg: 'initial',
+      },
+    },
+    border: '0.0625rem solid',
+    borderRadius: '4',
+  },
+  sizes: {
+    medium: {
+      fontSize: '3',
+      height: '48',
+      minWidth: '48',
+      paddingX: '16',
+    },
+    small: {
+      fontSize: '2',
+      height: '32',
+      minWidth: '32',
+      paddingX: '12',
+    },
+  },
+  variants: {
+    primary: {
+      _active: {
+        bgGradient: 'linear(to-b, purple.10, purple.10)',
+        ...disabledStates.primary,
+      },
       _hover: {
-        backgroundColor: `button/${variant}/bg-hover`,
-        borderColor: variant?.includes('secondary') ? `button/${variant}/border-hover` : `button/${variant}/bg-hover`,
-        color: `button/${variant}/fg-hover`,
+        bgGradient: 'linear(to-b, purple.30, purple.10)',
+        ...disabledStates.primary,
       },
+      bgGradient: 'linear(to-b, purple.40, purple.20)',
+      borderColor: 'purple.40',
+      color: 'neutral.95',
+      fontWeight: 'bold',
+      ...disabledStates.primary,
+    },
+    'primary--danger': {
       _active: {
-        backgroundColor: `button/${variant}/bg-active`,
-        borderColor: variant?.includes('secondary') ? `button/${variant}/border-active` : `button/${variant}/bg-active`,
-        color: `button/${variant}/fg-active`,
+        bgGradient: 'linear(to-b, red.20, red.20)',
+        borderColor: 'red.20',
+        ...disabledStates.primary,
       },
-      _disabled: {
-        backgroundColor: `button/${variant}/bg-disabled`,
-        borderColor: disabledBorderColor,
-        color: `button/${variant}/fg-disabled`,
-        cursor: 'not-allowed',
+      _hover: {
+        bgGradient: 'linear(to-b, red.40, red.20)',
+        borderColor: 'red.40',
+        ...disabledStates.primary,
       },
-      backgroundColor: `button/${variant}/bg`,
-      borderColor,
-      borderStyle: 'solid',
-      borderWidth: rem(1),
-      color: `button/${variant}/fg`,
-    });
-    return obj;
-  },
-  {} as Record<NonNullable<ButtonProps['variant']>, SystemStyleInterpolation>,
-);
-
-const buttonTheme = defineStyleConfig({
-  baseStyle,
-  defaultProps: {
-    size: 'lg',
-    variant: 'primary',
+      bgGradient: 'linear(to-b, red.50, red.30)',
+      borderColor: 'red.50',
+      color: 'neutral.95',
+      fontWeight: 'bold',
+      ...disabledStates.primary,
+    },
+    secondary: {
+      _active: {
+        bgGradient: 'linear(to-b, neutral.90, neutral.90)',
+        borderColor: 'neutral.80',
+        ...disabledStates.secondary,
+      },
+      _hover: {
+        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
+        ...disabledStates.secondary,
+      },
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      borderColor: 'neutral.90',
+      color: 'purple.10',
+      ...disabledStates.secondary,
+    },
+    'secondary--danger': {
+      _active: {
+        bgGradient: 'linear(to-b, red.90, red.90)',
+        borderColor: 'red.70',
+        ...disabledStates.secondary,
+      },
+      _hover: {
+        bgGradient: 'linear(to-b, red.93, red.93)',
+        borderColor: 'red.70',
+        ...disabledStates.secondary,
+      },
+      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
+      borderColor: 'neutral.90',
+      color: 'red.50',
+      ...disabledStates.secondary,
+    },
+    tertiary: {
+      _active: {
+        background: 'neutral.90',
+        borderColor: 'neutral.90',
+        ...disabledStates.tertiary,
+      },
+      _hover: {
+        background: 'neutral.95',
+        borderColor: 'neutral.95',
+        ...disabledStates.tertiary,
+      },
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'purple.50',
+      ...disabledStates.tertiary,
+    },
+    'tertiary--danger': {
+      _active: {
+        background: 'red.90',
+        borderColor: 'red.90',
+        ...disabledStates.tertiary,
+      },
+      _hover: {
+        background: 'red.93',
+        borderColor: 'red.93',
+        ...disabledStates.tertiary,
+      },
+      background: 'transparent',
+      borderColor: 'transparent',
+      color: 'red.50',
+      ...disabledStates.tertiary,
+    },
   },
-  sizes,
-  variants,
-});
+};
 
-export default buttonTheme;
+export default ButtonTheme;

package/src/Components/Button/Button.tsx

@@ -3,39 +3,43 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface ButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';
-  disabled?: never;
   isDanger?: boolean;
   leftIconName?: TypeIconName;
   rightIconName?: TypeIconName;
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger-primary' | 'danger-secondary' | 'danger-tertiary';
+  size?: 'small' | 'medium';
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  disabled?: never;
 }
 
 /**
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
 const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
-  const { as, isDanger, isDisabled, leftIconName, rightIconName, size = 'lg', variant, ...rest } = props;
+  const { as, isDanger, isDisabled, leftIconName, rightIconName, size = 'medium', variant, ...rest } = props;
   const properties: ChakraButtonProps = {
     as: isDisabled ? 'button' : as,
     isDisabled,
     size,
-    variant: isDanger ? `danger-${variant}` : variant,
+    variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
-  const iconSize = size === 'lg' ? '24' : '16';
+  const iconSize = size === 'medium' ? '24' : '16';
   if (leftIconName) {
     properties.leftIcon = <Icon name={leftIconName} size={iconSize} />;
   }
   if (rightIconName) {
     properties.rightIcon = <Icon name={rightIconName} size={iconSize} />;
   }
+  if ((properties.leftIcon || properties.rightIcon) && !properties.iconSpacing) {
+    properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
+  }
+
   return <ChakraButton {...properties} ref={ref} />;
 });
 
 Button.defaultProps = {
   as: 'button',
-  size: 'lg',
+  size: 'medium',
   variant: 'primary',
 } as ButtonProps;
 

package/src/Components/CodeBlock/CodeBlock.tsx

@@ -24,7 +24,7 @@ const CodeBlock = ({ children, isCopiable, ...props }: CodeBlockProps) => {
           aria-label="Copy to clipboard"
           iconName="Duplicate"
           onClick={onCopy}
-          size="sm"
+          size="small"
           sx={style.copyIcon}
           variant="secondary"
         />

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -38,7 +38,7 @@ const DatePickerFooter = ({
           gridColumn="1"
           gridRow={styleGrid('2', '1')}
           onClick={() => onClear()}
-          size="sm"
+          size="small"
           variant="tertiary"
           width="fit-content"
         >
@@ -68,11 +68,11 @@ const DatePickerFooter = ({
         )}
       </Text>
       <ButtonGroup gridColumn={styleGrid('2 / 4', '3')} gridRow={styleGrid('2', '1')} justifyContent="end">
-        <Button onClick={onClose} size="sm" variant="secondary">
+        <Button onClick={onClose} size="small" variant="secondary">
           Cancel
         </Button>
 
-        <Button onClick={onApply} size="sm">
+        <Button onClick={onApply} size="small">
           Apply
         </Button>
       </ButtonGroup>

package/src/Components/DatePicker/DatePickerHeader.tsx

@@ -23,7 +23,7 @@ export const DatePickerHeaderPrevious = ({ label }: { label: string }) => {
       iconName="ChevronLeft"
       isTooltipDisabled
       onClick={onPrevious}
-      size="sm"
+      size="small"
       variant="tertiary"
       visibility={controls === 'right' ? 'hidden' : undefined}
     />
@@ -39,7 +39,7 @@ export const DatePickerHeaderNext = ({ label }: { label: string }) => {
       iconName="ChevronRight"
       isTooltipDisabled
       onClick={onNext}
-      size="sm"
+      size="small"
       variant="tertiary"
       visibility={controls === 'left' ? 'hidden' : undefined}
     />

package/src/Components/DatePicker/DatePickerMonth.tsx

@@ -59,7 +59,7 @@ const DatePickerMonth = ({ controls, onMonthClick, onViewDateChange, viewDate }:
             flexShrink={0}
             onClick={onMonthClick}
             rightIconName="ChevronDown"
-            size="sm"
+            size="small"
             variant="tertiary"
           >
             {viewDate.monthLong}

package/src/Components/Filter/Filter.theme.ts

@@ -1,5 +1,6 @@
 import { createMultiStyleConfigHelpers, SystemStyleObject } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
+import { disabledStates } from '../Button/Button.theme';
 
 export const parts = [
   'container',
@@ -22,8 +23,6 @@ export type FilterStyle = Record<(typeof parts)[number], SystemStyleObject>;
 
 const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts);
 
-const disabledState = { background: 'transparent', borderColor: 'transparent', color: 'neutral.70' };
-
 const FilterTheme = defineMultiStyleConfig({
   baseStyle: {
     container: {
@@ -117,9 +116,9 @@ const FilterTheme = defineMultiStyleConfig({
       },
       _disabled: {
         cursor: 'not-allowed',
-        ...disabledState,
-        _active: disabledState,
-        _hover: disabledState,
+        ...disabledStates.tertiary,
+        _active: disabledStates.tertiary,
+        _hover: disabledStates.tertiary,
       },
       _hover: {
         background: 'neutral.93',
@@ -140,9 +139,9 @@ const FilterTheme = defineMultiStyleConfig({
       },
       _disabled: {
         cursor: 'not-allowed',
-        ...disabledState,
-        _active: disabledState,
-        _hover: disabledState,
+        ...disabledStates.tertiary,
+        _active: disabledStates.tertiary,
+        _hover: disabledStates.tertiary,
       },
       _hover: {
         background: 'neutral.93',

package/src/Components/Filter/Filter.tsx

@@ -163,7 +163,7 @@ const Filter = (props: FilterProps) => {
                 leftIconName="CloseSmall"
                 minWidth="7.5rem"
                 onClick={onClearFilters}
-                size="sm"
+                size="small"
                 variant="tertiary"
               >
                 Clear filters

package/src/Components/Filter/FilterAdd/FilterAdd.tsx

@@ -57,7 +57,7 @@ const FilterAdd = (props: FilterAddProps) => {
         isLoading={isLoading}
         leftIconName="PlusOpen"
         position={isOpen ? 'relative' : undefined}
-        size="sm"
+        size="small"
         variant="tertiary"
         zIndex={isOpen ? 'dialog' : undefined}
       >

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -170,14 +170,14 @@ const FilterForm = (props: FilterFormProps) => {
       )}
       <ButtonGroup spacing="12" sx={filterStyle.formButtonGroup}>
         {isEditMode && (
-          <Button marginInlineEnd="auto" onClick={onClearClick} size="sm" variant="tertiary">
+          <Button marginInlineEnd="auto" onClick={onClearClick} size="small" variant="tertiary">
             Clear
           </Button>
         )}
-        <Button onClick={onCancelClick} size="sm" type="reset" variant="secondary">
+        <Button onClick={onCancelClick} size="small" type="reset" variant="secondary">
           Cancel
         </Button>
-        <Button isDisabled={isDisabled} size="sm" type="submit">
+        <Button isDisabled={isDisabled} size="small" type="submit">
           {(selected.length === 0 || selected[0] === '') && isEditMode ? 'Remove' : 'Apply'}
         </Button>
       </ButtonGroup>

package/src/Components/Filter/FilterItem/FilterItem.tsx

@@ -79,7 +79,7 @@ const FilterItem = (props: FilterItemProps) => {
               iconName="CloseSmall"
               isDisabled={isLoading}
               onClick={() => onFilterClear(category)}
-              size="sm"
+              size="small"
               sx={filterStyle.tagClear}
               tooltipProps={{ shouldWrapChildren: false }}
               variant="tertiary"

package/src/Components/Filter/FilterSearch/FilterSearch.tsx

@@ -56,7 +56,7 @@ const FilterSearch = (props: FilterSearchProps) => {
       <Input {...inputProps} />
       {!!searchValue && (
         <InputRightElement>
-          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="sm" variant="tertiary" />
+          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="small" variant="tertiary" />
         </InputRightElement>
       )}
     </InputGroup>

package/src/Components/Form/FileInput/FileInput.tsx

@@ -104,7 +104,7 @@ const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
               </Text>
               <Text as="span">{selectedFileNames[0]}</Text>
             </Box>
-            <Button flexShrink={0} leftIconName="MinusRemove" onClick={onRemoveClick} size="sm" variant="secondary">
+            <Button flexShrink={0} leftIconName="MinusRemove" onClick={onRemoveClick} size="small" variant="secondary">
               Remove
             </Button>
           </>

package/src/Components/IconButton/IconButton.tsx

@@ -4,16 +4,15 @@ import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface IconButtonProps extends ChakraIconButtonProps {
   as?: 'a' | 'button';
-  disabled?: never;
   iconName: TypeIconName;
   isDanger?: boolean;
   iconSize?: IconProps['size'];
   isTooltipDisabled?: boolean;
   label?: string;
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'small' | 'medium';
   tooltipCloseDelay?: number;
   tooltipProps?: Omit<TooltipProps, 'children'>;
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger-primary' | 'danger-secondary' | 'danger-tertiary';
+  variant?: 'primary' | 'secondary' | 'tertiary';
 }
 
 /**
@@ -36,10 +35,10 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   } = props;
   const properties: ChakraIconButtonProps = {
     as: isDisabled ? 'button' : as,
-    icon: <Icon name={iconName} size={iconSize || (size === 'lg' ? '24' : '16')} />,
+    icon: <Icon name={iconName} size={iconSize || (size === 'small' ? '16' : '24')} />,
     isDisabled,
     size,
-    variant: isDanger ? `danger-${variant}` : variant,
+    variant: isDanger ? `${variant}--danger` : variant,
     ...rest,
   };
   return (
@@ -57,7 +56,7 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
 
 IconButton.defaultProps = {
   as: 'button',
-  size: 'lg',
+  size: 'medium',
   tooltipCloseDelay: 0,
   variant: 'primary',
 } as IconButtonProps;

package/src/Components/Icons/16x16/OutsideContributor.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+
+const OutsideContributor = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      clipRule="evenodd"
+      d="M4.5 1C3.67157 1 3 1.67157 3 2.5V4C3 4.82843 3.67157 5.5 4.5 5.5H5.5C6.32843 5.5 7 4.82843 7 4V2.5C7 1.67157 6.32843 1 5.5 1H4.5ZM5.5 2.5H4.5V4H5.5V2.5Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+    <path
+      clipRule="evenodd"
+      d="M11 15.5C13.4853 15.5 15.5 13.4853 15.5 11C15.5 8.51472 13.4853 6.5 11 6.5C8.51472 6.5 6.5 8.51472 6.5 11C6.5 13.4853 8.51472 15.5 11 15.5ZM9 10H11.293L8.64648 12.6465L9.35359 13.3536L12 10.7072V13H13V9H9V10Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+    <path
+      d="M2.25 6.75H7.50869C6.99989 7.16846 6.56756 7.6765 6.2358 8.25H2.5V11H1V8C1 7.30964 1.55964 6.75 2.25 6.75Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default OutsideContributor;

package/src/Components/Icons/16x16/index.ts

@@ -233,3 +233,4 @@ export { default as Wow } from './Wow';
 export { default as WrappedLines } from './WrappedLines';
 export { default as Xamarin } from './Xamarin';
 export { default as XTwitter } from './XTwitter';
+export { default as OutsideContributor } from './OutsideContributor';

package/src/Components/Icons/24x24/OutsideContributor.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+
+const OutsideContributor = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      clipRule="evenodd"
+      d="M7.5 2C6.39543 2 5.5 2.89543 5.5 4V7C5.5 8.10457 6.39543 9 7.5 9H9.5C10.6046 9 11.5 8.10457 11.5 7V4C11.5 2.89543 10.6046 2 9.5 2H7.5ZM9.5 4H7.5V7H9.5V4Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+    <path
+      clipRule="evenodd"
+      d="M17.5 23C20.5376 23 23 20.5376 23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23ZM15.5 16H18.293L14.6465 19.6465L15.3536 20.3536L19 16.7072V19.5H20V15H15.5V16Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+    <path
+      d="M2 13C2 11.8954 2.89543 11 4 11H13C13.6154 11 14.1659 11.278 14.5328 11.7152C13.8884 12.0464 13.3065 12.4822 12.8096 13H4V17H2V13Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default OutsideContributor;

package/src/Components/Icons/24x24/index.ts

@@ -233,3 +233,4 @@ export { default as Wow } from './Wow';
 export { default as WrappedLines } from './WrappedLines';
 export { default as Xamarin } from './Xamarin';
 export { default as XTwitter } from './XTwitter';
+export { default as OutsideContributor } from './OutsideContributor';

package/src/Components/Note/Note.tsx

@@ -55,7 +55,7 @@ const Note = ({ children, startingHeight, status }: NoteProps) => {
       </Box>
       {!!startingHeight && (
         <Box __css={buttonContainer}>
-          <Button leftIconName="ChevronDown" onClick={() => setExpanded(!isExpanded)} size="sm" variant="secondary">
+          <Button leftIconName="ChevronDown" onClick={() => setExpanded(!isExpanded)} size="small" variant="secondary">
             {isExpanded ? 'Show less' : 'Show more'}
           </Button>
         </Box>

package/src/Components/OverflowMenu/OverflowMenu.tsx

@@ -12,7 +12,7 @@ export interface OverflowMenuProps extends MenuProps {
   withPortal?: boolean;
 }
 
-const OverflowMenu = ({ buttonSize = 'sm', children, triggerLabel, withPortal }: OverflowMenuProps) => {
+const OverflowMenu = ({ buttonSize = 'small', children, triggerLabel, withPortal }: OverflowMenuProps) => {
   const Wrapper = withPortal ? Portal : Fragment;
   return (
     <Menu isLazy>

package/src/Components/Table/TableIconButton.tsx

@@ -17,7 +17,7 @@ const TableIconButton = forwardRef<TableIconButtonProps, 'button'>((props, ref)
       color={isDanger ? undefined : 'pal.purple.10'}
       iconSize="24"
       isDanger={isDanger}
-      size="sm"
+      size="small"
       variant="tertiary"
       {...props}
     />

package/src/tokens/tokensToTheme.json

@@ -1176,16 +1176,16 @@
       "fontSize": "3",
       "textDecoration": "underline"
     },
-    "comp/stat/sm": {
+    "comp/data/sm": {
       "lineHeight": "size-3",
       "fontSize": "3"
     },
-    "comp/stat/md": {
+    "comp/data/md": {
       "fontWeight": "semibold",
       "lineHeight": "size-5",
       "fontSize": "5"
     },
-    "comp/stat/lg": {
+    "comp/data/lg": {
       "fontWeight": "semibold",
       "lineHeight": "size-6",
       "fontSize": "6"