@bitrise/bitkit 13.180.0 → 13.182.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.180.0",
+  "version": "13.182.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -33,12 +33,12 @@
     "@chakra-ui/theme": "^3.4.7",
     "@chakra-ui/theme-tools": "^2.2.7",
     "@chakra-ui/utils": "^2.2.3",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@fontsource/figtree": "^5.1.1",
     "@fontsource/source-code-pro": "^5.1.0",
-    "framer-motion": "^11.11.15",
+    "framer-motion": "^11.11.17",
     "luxon": "^3.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -58,15 +58,15 @@
     "@bitrise/eslint-plugin": "^2.12.0",
     "@chakra-ui/cli": "^2.5.6",
     "@google-cloud/storage": "^7.14.0",
-    "@storybook/addon-actions": "^8.4.3",
-    "@storybook/addon-essentials": "^8.4.3",
-    "@storybook/addon-interactions": "^8.4.3",
-    "@storybook/addon-links": "^8.4.3",
+    "@storybook/addon-actions": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/blocks": "^8.4.3",
-    "@storybook/react": "^8.4.3",
-    "@storybook/react-webpack5": "^8.4.3",
-    "@storybook/theming": "^8.4.3",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-webpack5": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
@@ -87,9 +87,9 @@
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.2",
     "release-it": "^17.10.0",
-    "storybook": "^8.4.3",
+    "storybook": "^8.4.5",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "files": [
     "src",

package/src/Components/Menu/Menu.theme.ts

@@ -1,4 +1,5 @@
 import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+import { defineStyleConfig } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
 
 const disabledItem: SystemStyleObject = {
@@ -9,55 +10,76 @@ const disabledItem: SystemStyleObject = {
   },
 };
 
-const MenuTheme: SystemStyleObject = {
-  baseStyle: {
-    groupTitle: {
-      _after: {
-        backgroundColor: 'separator.primary',
-        content: `''`,
-        flexGrow: '1',
-        height: rem(1),
-        position: 'relative',
-        top: '-1px',
-      },
-      alignItems: 'center',
-      color: 'neutral.60',
-      cursor: 'default',
-      display: 'flex',
-      fontSize: '1',
-      fontWeight: 'bold',
-      gap: '16',
-      lineHeight: rem(16),
-      paddingX: '16',
-      paddingY: '12',
+const baseStyle: SystemStyleObject = {
+  groupTitle: {
+    _after: {
+      backgroundColor: 'separator.primary',
+      content: `''`,
+      flexGrow: '1',
+      height: rem(1),
       position: 'relative',
-      textTransform: 'uppercase',
+      top: '-1px',
     },
-    item: {
-      _active: {
-        backgroundColor: 'neutral.90',
-        ...disabledItem,
-      },
-      _focus: {
-        backgroundColor: 'neutral.93',
-        boxShadow: 'none',
-        ...disabledItem,
-      },
-      color: 'purple.10',
-      paddingX: '16',
-      paddingY: '12',
+    alignItems: 'center',
+    color: 'neutral.60',
+    cursor: 'default',
+    display: 'flex',
+    fontSize: '1',
+    fontWeight: 'bold',
+    gap: '16',
+    lineHeight: rem(16),
+    paddingX: '16',
+    paddingY: '12',
+    position: 'relative',
+    textTransform: 'uppercase',
+  },
+  icon: {
+    size: '24',
+  },
+  item: {
+    _active: {
+      backgroundColor: 'neutral.90',
       ...disabledItem,
     },
-    list: {
-      backgroundColor: 'neutral.100',
-      border: '1px solid',
-      borderColor: 'neutral.93',
-      borderRadius: '4',
-      boxShadow: 'large',
-      paddingY: '8',
-      zIndex: '1',
+    _focus: {
+      backgroundColor: 'neutral.93',
+      boxShadow: 'none',
+      ...disabledItem,
     },
+    color: 'purple.10',
+    paddingX: '16',
+    paddingY: '12',
+    textStyle: 'body/lg/regular',
+    ...disabledItem,
+  },
+  list: {
+    backgroundColor: 'neutral.100',
+    border: '1px solid',
+    borderColor: 'neutral.93',
+    borderRadius: '4',
+    boxShadow: 'large',
+    paddingY: '8',
+    zIndex: '1',
   },
 };
 
+const MenuTheme = defineStyleConfig({
+  baseStyle,
+  defaultProps: {
+    size: 'lg',
+  },
+  sizes: {
+    md: {
+      icon: {
+        size: '16',
+      },
+      item: {
+        paddingY: '8',
+        textStyle: 'body/md/regular',
+      },
+    },
+    lg: {},
+  },
+});
+
 export default MenuTheme;

package/src/Components/Menu/Menu.tsx

@@ -1,6 +1,8 @@
 import { Menu as ChakraMenu, MenuProps as ChakraMenuProps } from '@chakra-ui/react';
 
-export type MenuProps = ChakraMenuProps;
+export type MenuProps = ChakraMenuProps & {
+  size?: 'lg' | 'md';
+};
 
 const Menu = (props: MenuProps) => <ChakraMenu {...props} />;
 

package/src/Components/Menu/MenuItem.tsx

@@ -1,4 +1,10 @@
-import { forwardRef, MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps } from '@chakra-ui/react';
+import {
+  forwardRef,
+  MenuItem as ChakraMenuItem,
+  MenuItemProps as ChakraMenuItemProps,
+  useMenuStyles,
+  SystemStyleObject,
+} from '@chakra-ui/react';
 import { TypeColors } from '../../types/bitkit';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
@@ -25,6 +31,10 @@ export interface MenuItemProps extends Omit<ChakraMenuItemProps, 'icon'> {
 }
 
 const MenuItem = forwardRef<MenuItemProps, 'button'>((props, ref) => {
+  const styles = useMenuStyles();
+
+  const { size: iconSize, ...restIconStyles } = styles.icon as SystemStyleObject & { size: '16' | '24' };
+
   const {
     as,
     children,
@@ -46,10 +56,25 @@ const MenuItem = forwardRef<MenuItemProps, 'button'>((props, ref) => {
 
   if (iconName || leftIconName || rightIconName) {
     properties.children = (
-      <Box display="flex" gap={properties.iconSpacing} width="100%">
-        {(iconName || leftIconName) && <Icon color={leftIconColor} name={iconName || leftIconName || 'Bitbot'} />}
+      <Box alignItems="center" display="flex" gap={properties.iconSpacing} width="100%">
+        {(iconName || leftIconName) && (
+          <Icon
+            color={leftIconColor}
+            name={iconName || leftIconName || 'Bitbot'}
+            size={iconSize}
+            __css={restIconStyles}
+          />
+        )}
         {children}
-        {rightIconName && <Icon color={rightIconColor} marginInlineStart="auto" name={rightIconName} />}
+        {rightIconName && (
+          <Icon
+            color={rightIconColor}
+            marginInlineStart="auto"
+            name={rightIconName}
+            size={iconSize}
+            __css={restIconStyles}
+          />
+        )}
       </Box>
     );
   } else {

package/src/Components/OverflowMenu/OverflowMenu.tsx

@@ -12,10 +12,17 @@ export interface OverflowMenuProps extends MenuProps {
   withPortal?: boolean;
 }
 
-const OverflowMenu = ({ buttonSize = 'sm', children, triggerLabel = 'Open menu', withPortal }: OverflowMenuProps) => {
+const OverflowMenu = ({
+  buttonSize = 'sm',
+  children,
+  triggerLabel = 'Open menu',
+  withPortal,
+  ...rest
+}: OverflowMenuProps) => {
   const Wrapper = withPortal ? Portal : Fragment;
+
   return (
-    <Menu isLazy>
+    <Menu isLazy {...rest}>
       <MenuButton
         aria-label={triggerLabel}
         as={ControlButton}

package/src/Components/Table/Table.theme.ts

@@ -75,6 +75,7 @@ const Tabletheme = {
         paddingX: '16',
         paddingY: '8',
         textAlign: 'left',
+        textStyle: 'body/md/regular',
       },
       th: {
         fontWeight: 'bold',