@bitrise/bitkit 12.83.0 → 12.84.0

package/src/Components/LightBox/LightBox.tsx

@@ -1,10 +1,10 @@
 import {
+  HTMLChakraProps,
   Modal,
-  ModalOverlay,
   ModalContent,
+  ModalOverlay,
   useBreakpointValue,
   usePrefersReducedMotion,
-  HTMLChakraProps,
 } from '@chakra-ui/react';
 import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 
@@ -15,7 +15,7 @@ export interface LightBoxProps extends Omit<HTMLChakraProps<'section'>, 'scrollB
   onClose(): void;
 }
 
-const LightBox = ({ children, dataTestid, size, isOpen, onClose, ...rest }: LightBoxProps) => {
+const LightBox = ({ children, dataTestid, isOpen, onClose, size, ...rest }: LightBoxProps) => {
   const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
   const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.TABLET]: size });
 

package/src/Components/Link/Link.theme.ts

@@ -1,24 +1,24 @@
 import { textSizes } from '../../Foundations/Typography/Typography';
 
 const schemeColors = {
+  default: { color: 'inherit', hover: 'inherit' },
+  gray: { color: 'neutral.70', hover: 'neutral.50' },
   purple: { color: 'purple.50', hover: 'purple.30' },
   white: { color: 'neutral.100', hover: 'neutral.95' },
-  gray: { color: 'neutral.70', hover: 'neutral.50' },
-  default: { color: 'inherit', hover: 'inherit' },
 };
 
 const LinkTheme = {
   baseStyle: ({ colorScheme: c }: { colorScheme?: 'purple' | 'white' | 'gray' }) => {
     const { color, hover } = schemeColors[c || 'default'];
     return {
-      color,
-      fontSize: 'inherit',
       _focus: {
         outline: 'none',
       },
       _hover: {
         color: hover,
       },
+      color,
+      fontSize: 'inherit',
     };
   },
   ...textSizes,

package/src/Components/Link/Link.tsx

@@ -1,4 +1,4 @@
-import { Link as ChakraLink, LinkProps as ChakraLinkProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 export interface LinkProps extends ChakraLinkProps {

package/src/Components/LinkBox/LinkBox.tsx

@@ -1,4 +1,4 @@
-import { LinkBox as ChakraLinkBox, LinkBoxProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, LinkBox as ChakraLinkBox, LinkBoxProps } from '@chakra-ui/react';
 
 const LinkBox = forwardRef<LinkBoxProps, 'div'>((props, ref) => {
   return <ChakraLinkBox {...props} ref={ref} />;

package/src/Components/LinkOverlay/LinkOverlay.tsx

@@ -1,4 +1,4 @@
-import { LinkOverlay as ChakraLinkOverlay, LinkOverlayProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, LinkOverlay as ChakraLinkOverlay, LinkOverlayProps } from '@chakra-ui/react';
 
 const LinkOverlay = forwardRef<LinkOverlayProps, 'a'>((props, ref) => {
   return <ChakraLinkOverlay {...props} ref={ref} />;

package/src/Components/List/List.theme.ts

@@ -1,7 +1,6 @@
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
 const ListTheme: ComponentStyleConfig = {
-  parts: ['container', 'item'],
   baseStyle: ({ as }) => {
     if (as === 'ul') {
       return {
@@ -15,6 +14,7 @@ const ListTheme: ComponentStyleConfig = {
 
     return {};
   },
+  parts: ['container', 'item'],
 };
 
 export default ListTheme;

package/src/Components/List/List.tsx

@@ -1,4 +1,4 @@
-import { ListProps as ChakraListProps, forwardRef, OrderedList, UnorderedList } from '@chakra-ui/react';
+import { forwardRef, ListProps as ChakraListProps, OrderedList, UnorderedList } from '@chakra-ui/react';
 
 export interface ListProps extends ChakraListProps {
   isOrdered?: boolean;

package/src/Components/List/ListItem.tsx

@@ -1,4 +1,4 @@
-import { ListItem as ChakraListItem, ListItemProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, ListItem as ChakraListItem, ListItemProps } from '@chakra-ui/react';
 
 /**
  * ListItem is the valid children of List. It renders a <li> element by default.

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

@@ -11,52 +11,52 @@ const disabledItem: SystemStyleObject = {
 
 const MenuTheme: SystemStyleObject = {
   baseStyle: {
-    list: {
-      backgroundColor: 'neutral.100',
-      border: '1px solid',
-      borderColor: 'neutral.93',
-      borderRadius: '4',
-      boxShadow: 'large',
-      paddingY: '12',
-      zIndex: '1',
-    },
     groupTitle: {
-      display: 'flex',
-      gap: '16',
+      _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),
-      paddingY: '12',
       paddingX: '16',
+      paddingY: '12',
       position: 'relative',
       textTransform: 'uppercase',
-      _after: {
-        content: `''`,
-        flexGrow: '1',
-        height: rem(1),
-        backgroundColor: 'separator.primary',
-        position: 'relative',
-        top: '-1px',
-      },
     },
     item: {
-      color: 'purple.10',
-      paddingY: '12',
-      paddingX: '16',
+      _active: {
+        backgroundColor: 'neutral.90',
+        ...disabledItem,
+      },
       _focus: {
         backgroundColor: 'neutral.93',
         boxShadow: 'none',
         ...disabledItem,
       },
-      _active: {
-        backgroundColor: 'neutral.90',
-        ...disabledItem,
-      },
+      color: 'purple.10',
+      paddingX: '16',
+      paddingY: '12',
       ...disabledItem,
     },
+    list: {
+      backgroundColor: 'neutral.100',
+      border: '1px solid',
+      borderColor: 'neutral.93',
+      borderRadius: '4',
+      boxShadow: 'large',
+      paddingY: '12',
+      zIndex: '1',
+    },
   },
 };
 

package/src/Components/Menu/MenuButton.tsx

@@ -1,4 +1,4 @@
-import { MenuButton as ChakraMenuButton, MenuButtonProps as ChakraMenuButtonProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, MenuButton as ChakraMenuButton, MenuButtonProps as ChakraMenuButtonProps } from '@chakra-ui/react';
 
 export type MenuButtonProps = ChakraMenuButtonProps;
 

package/src/Components/Menu/MenuItem.tsx

@@ -1,17 +1,17 @@
-import { MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps } from '@chakra-ui/react';
 import { TypeColors } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 
 const dangerStyle = {
-  color: 'red.50',
+  _active: {
+    background: 'red.90',
+  },
   _focus: {
     background: 'red.93',
     boxShadow: 'none',
   },
-  _active: {
-    background: 'red.90',
-  },
+  color: 'red.50',
 };
 
 export interface MenuItemProps extends Omit<ChakraMenuItemProps, 'icon'> {
@@ -49,7 +49,7 @@ const MenuItem = forwardRef<MenuItemProps, 'button'>((props, ref) => {
       <Box display="flex" gap={properties.iconSpacing} width="100%">
         {(iconName || leftIconName) && <Icon color={leftIconColor} name={iconName || leftIconName || 'Bitbot'} />}
         {children}
-        {rightIconName && <Icon color={rightIconColor} name={rightIconName} marginInlineStart="auto" />}
+        {rightIconName && <Icon color={rightIconColor} marginInlineStart="auto" name={rightIconName} />}
       </Box>
     );
   } else {

package/src/Components/Menu/MenuList.tsx

@@ -1,4 +1,4 @@
-import { MenuList as ChakraMenuList, MenuListProps as ChakraMenuListProps, forwardRef } from '@chakra-ui/react';
+import { forwardRef, MenuList as ChakraMenuList, MenuListProps as ChakraMenuListProps } from '@chakra-ui/react';
 
 export type MenuListProps = ChakraMenuListProps;
 

package/src/Components/Note/Note.theme.ts

@@ -1,79 +1,79 @@
 import { Status } from './Note';
 
 const borderColor = {
-  info: 'separator.primary',
   error: 'red.80',
-  warning: 'yellow.80',
+  info: 'separator.primary',
   success: 'green.80',
+  warning: 'yellow.80',
 };
 
 const decorationBackground = {
-  info: 'neutral.95',
   error: 'red.95',
-  warning: 'yellow.95',
+  info: 'neutral.95',
   success: 'green.95',
+  warning: 'yellow.95',
 };
 
 const decorationColor = {
-  info: 'neutral.40',
   error: 'red.50',
-  warning: 'yellow.50',
+  info: 'neutral.40',
   success: 'green.50',
+  warning: 'yellow.50',
 };
 const NoteTheme = {
-  parts: ['container', 'icon', 'body', 'buttonContainer'],
   baseStyle({ isExpanded, status }: { isExpanded: boolean; status: Status }) {
     return {
-      wrapper: {
-        display: 'flex',
-        boxShadow: 'medium',
-        borderRadius: '8',
-        position: 'relative',
-      },
-      decoration: {
-        color: decorationColor[status],
-        display: 'flex',
-        width: '40',
-        borderTopLeftRadius: '8',
-        borderBottomLeftRadius: '8',
-        borderWidth: '1px',
-        borderRight: 'none',
-        px: '8',
-        py: '12',
-        borderColor: borderColor[status],
-        bg: decorationBackground[status],
-      },
-      container: {
-        flexGrow: 1,
-        paddingTop: '24',
-        paddingRight: '24',
-        paddingBottom: ['80', '32'],
-        paddingLeft: '16',
-        borderTopRightRadius: '8',
-        borderBottomRightRadius: '8',
-        borderWidth: '1px',
-        borderLeft: 'none',
-        borderColor: borderColor[status],
-        overflow: 'hidden',
-      },
       buttonContainer: {
-        position: 'absolute',
-        left: isExpanded ? 'auto' : '40px',
-        right: 1,
-        bottom: 1,
-        textAlign: 'right',
-        paddingX: '24',
-        paddingTop: '80',
-        paddingBottom: '16',
         background: isExpanded ? undefined : 'linear-gradient(0deg, #FFF 12.57%, rgba(255, 255, 255, 0.00) 100%)',
         borderBottomRadius: '8',
+        bottom: 1,
+        left: isExpanded ? 'auto' : '40px',
+        paddingBottom: '16',
+        paddingTop: '80',
+        paddingX: '24',
+        position: 'absolute',
+        right: 1,
         svg: {
           transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
           transition: '300ms',
         },
+        textAlign: 'right',
+      },
+      container: {
+        borderBottomRightRadius: '8',
+        borderColor: borderColor[status],
+        borderLeft: 'none',
+        borderTopRightRadius: '8',
+        borderWidth: '1px',
+        flexGrow: 1,
+        overflow: 'hidden',
+        paddingBottom: ['80', '32'],
+        paddingLeft: '16',
+        paddingRight: '24',
+        paddingTop: '24',
+      },
+      decoration: {
+        bg: decorationBackground[status],
+        borderBottomLeftRadius: '8',
+        borderColor: borderColor[status],
+        borderRight: 'none',
+        borderTopLeftRadius: '8',
+        borderWidth: '1px',
+        color: decorationColor[status],
+        display: 'flex',
+        px: '8',
+        py: '12',
+        width: '40',
+      },
+      wrapper: {
+        borderRadius: '8',
+        boxShadow: 'medium',
+        display: 'flex',
+        position: 'relative',
       },
     };
   },
+  parts: ['container', 'icon', 'body', 'buttonContainer'],
 };
 
 export default NoteTheme;

package/src/Components/Note/Note.tsx

@@ -1,4 +1,4 @@
-import { useState, ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import { useMultiStyleConfig } from '@chakra-ui/react';
 import Box from '../Box/Box';
 import Collapse from '../Collapse/Collapse';
@@ -7,9 +7,9 @@ import Button from '../Button/Button';
 
 export type Status = 'info' | 'success' | 'error' | 'warning';
 const iconNames = {
+  error: 'ErrorGeneral',
   info: 'Info',
   success: 'Tick',
-  error: 'ErrorGeneral',
   warning: 'Warning',
 } as const;
 
@@ -46,7 +46,7 @@ const Note = ({ children, startingHeight, status }: NoteProps) => {
   return (
     <Box __css={wrapper}>
       <Box __css={decoration}>
-        <Icon size="24" name={iconNames[status]} />
+        <Icon name={iconNames[status]} size="24" />
       </Box>
       <Box __css={container}>
         <Container isExpanded={isExpanded} startingHeight={startingHeight}>

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -11,38 +11,38 @@ import CodeBlock from '../CodeBlock/CodeBlock';
 
 const defaultComponents: Components = {
   a: ({ node, ...props }) => <Link colorScheme="purple" isUnderlined target="_blank" {...props} />,
-  h1: ({ node, ...props }) => <Text as="h1" size="6" {...props} />,
-  h2: ({ node, ...props }) => <Text as="h2" size="5" {...props} />,
-  h3: ({ node, ...props }) => <Text as="h3" size="4" fontWeight="bold" {...props} />,
-  h4: ({ node, ...props }) => <Text as="h4" size="3" fontWeight="bold" {...props} />,
-  h5: ({ node, ...props }) => <Text as="h5" size="2" fontWeight="bold" {...props} />,
-  h6: ({ node, ...props }) => <Text as="h6" size="1" fontWeight="bold" {...props} />,
-  p: ({ node, ...props }) => <Text {...props} />,
-  hr: () => <Divider my="16" borderColor="separator.primary" size="2" />,
-  ul: ({ node, ...props }) => <List {...props} />,
-  ol: ({ node, ...props }) => <List isOrdered {...props} />,
-  li: ({ node, ...props }) => <ListItem {...props} />,
-  code: ({ node, ...props }) => <code {...props} />,
-  pre: ({ node, ...props }) => <CodeBlock>{props.children as string}</CodeBlock>,
   blockquote: ({ children }) => (
     <Box
-      py="8"
       as="blockquote"
-      paddingLeft="16"
+      borderColor="separator.primary"
       borderLeftStyle="solid"
       borderLeftWidth="2px"
-      borderColor="separator.primary"
       color="text.secondary"
+      paddingLeft="16"
+      py="8"
     >
       {children}
     </Box>
   ),
+  code: ({ node, ...props }) => <code {...props} />,
+  h1: ({ node, ...props }) => <Text as="h1" size="6" {...props} />,
+  h2: ({ node, ...props }) => <Text as="h2" size="5" {...props} />,
+  h3: ({ node, ...props }) => <Text as="h3" fontWeight="bold" size="4" {...props} />,
+  h4: ({ node, ...props }) => <Text as="h4" fontWeight="bold" size="3" {...props} />,
+  h5: ({ node, ...props }) => <Text as="h5" fontWeight="bold" size="2" {...props} />,
+  h6: ({ node, ...props }) => <Text as="h6" fontWeight="bold" size="1" {...props} />,
+  hr: () => <Divider borderColor="separator.primary" my="16" size="2" />,
+  li: ({ node, ...props }) => <ListItem {...props} />,
+  ol: ({ node, ...props }) => <List isOrdered {...props} />,
+  p: ({ node, ...props }) => <Text {...props} />,
+  pre: ({ node, ...props }) => <CodeBlock>{props.children as string}</CodeBlock>,
+  ul: ({ node, ...props }) => <List {...props} />,
 };
 type NoteMarkdownContentProps = { md: string } & Pick<
   ComponentProps<typeof ReactMarkdown>,
   'components' | 'rehypePlugins'
 >;
-const NoteMarkdownContent = ({ md, components, ...rest }: NoteMarkdownContentProps) => {
+const NoteMarkdownContent = ({ components, md, ...rest }: NoteMarkdownContentProps) => {
   const extendedComponents = { ...defaultComponents, ...components };
   return (
     <Box display="flex" flexDirection="column" gap="16">

package/src/Components/Notification/Notification.tsx

@@ -11,18 +11,18 @@ import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 type NotificationStatus = 'info' | 'error' | 'success' | 'warning' | 'progress';
 
 const STATUSES: Record<NotificationStatus, { colorScheme: ColorScheme; defaultIcon: ReactElement }> = {
-  info: { colorScheme: 'blue', defaultIcon: <Icon name="Info" /> },
   error: { colorScheme: 'red', defaultIcon: <Icon name="ErrorGeneral" /> },
-  success: { colorScheme: 'green', defaultIcon: <Icon name="Tick" /> },
-  warning: { colorScheme: 'yellow', defaultIcon: <Icon name="Warning" /> },
+  info: { colorScheme: 'blue', defaultIcon: <Icon name="Info" /> },
   progress: {
     colorScheme: 'purple',
     defaultIcon: (
-      <Box width={24} height={24} padding={2}>
+      <Box height={24} padding={2} width={24}>
         <ProgressSpinner size={20} />
       </Box>
     ),
   },
+  success: { colorScheme: 'green', defaultIcon: <Icon name="Tick" /> },
+  warning: { colorScheme: 'yellow', defaultIcon: <Icon name="Warning" /> },
 } as const;
 
 export type ActionProps = {
@@ -44,13 +44,13 @@ const ActionContext = createContext<{ colorScheme: ColorScheme }>({
   colorScheme: 'blue',
 });
 
-const NotificationAction = ({ label, href, ...rest }: ActionProps) => {
+const NotificationAction = ({ href, label, ...rest }: ActionProps) => {
   const actionContext = useContext(ActionContext);
   return (
     <ColorButton
+      as={(href ? 'a' : 'button') as any}
       flexGrow={0}
       flexShrink={0}
-      as={(href ? 'a' : 'button') as any}
       href={href}
       {...actionContext}
       {...rest}
@@ -61,7 +61,7 @@ const NotificationAction = ({ label, href, ...rest }: ActionProps) => {
 };
 
 const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
-  const { status, action, children, onClose, showIcon = true, iconName, ...rest } = props;
+  const { action, children, iconName, onClose, showIcon = true, status, ...rest } = props;
   const { colorScheme, defaultIcon } = STATUSES[status];
   const icon = iconName ? <Icon name={iconName} /> : defaultIcon;
   let actionButton;
@@ -77,18 +77,18 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
     <ChakraAlert ref={ref} {...rest} colorScheme={colorScheme}>
       <ActionContext.Provider value={actionContext}>
         {showIcon && cloneElement(icon, { flexShrink: 0, marginTop })}
-        <Box display="flex" justifyContent="start" flexDirection={['column', 'row']} gap={16} flexGrow={1}>
-          <Box wordBreak="break-word" flexGrow={actionPlacement === 'end' ? 1 : undefined} marginTop={marginTop}>
+        <Box display="flex" flexDirection={['column', 'row']} flexGrow={1} gap={16} justifyContent="start">
+          <Box flexGrow={actionPlacement === 'end' ? 1 : undefined} marginTop={marginTop} wordBreak="break-word">
             {children}
           </Box>
           {actionButton}
         </Box>
         {onClose && (
           <CloseButton
+            colorScheme={colorScheme}
             flexShrink={0}
             marginLeft="auto"
             marginTop={marginTop}
-            colorScheme={colorScheme}
             onClick={onClose}
           />
         )}

package/src/Components/NumberInput/NumberInput.theme.ts

@@ -3,31 +3,31 @@ import { SystemStyleObject } from '@chakra-ui/react';
 const NumberInputTheme = {
   baseStyle: {
     field: <SystemStyleObject>{
-      height: '42',
-      paddingLeft: '12',
-      borderRadius: '4',
-      borderStyle: 'solid',
-      borderColor: 'neutral.90',
-      borderWidth: '1px',
       _focusVisible: {
         boxShadow: 'outline',
         outline: 'none',
       },
+      borderColor: 'neutral.90',
+      borderRadius: '4',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      height: '42',
+      paddingLeft: '12',
     },
   },
   sizes: {
-    small: {
+    medium: {
       field: {
-        height: '32',
-        fontSize: '2',
-        boxShadow: 'innerSmall',
+        boxShadow: 'inner',
+        fontSize: '3',
+        height: '48',
       },
     },
-    medium: {
+    small: {
       field: {
-        height: '48',
-        fontSize: '3',
-        boxShadow: 'inner',
+        boxShadow: 'innerSmall',
+        fontSize: '2',
+        height: '32',
       },
     },
   },

package/src/Components/Popover/Popover.theme.ts

@@ -5,13 +5,13 @@ const $arrowBackground = cssVar('popper-arrow-bg');
 
 const PopoverTheme: SystemStyleObject = {
   baseStyle: {
-    popper: {
-      zIndex: 'popover',
-    },
     content: {
       borderRadius: 8,
       boxShadow: 'large',
     },
+    popper: {
+      zIndex: 'popover',
+    },
   },
   variants: {
     dark: {

package/src/Components/Popover/Popover.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { PopoverProps as ChakraPopoverProps, Popover as ChakraPopover } from '@chakra-ui/react';
+import { Popover as ChakraPopover, PopoverProps as ChakraPopoverProps } from '@chakra-ui/react';
 import { PopoverContext, PopoverContextType } from './Popover.context';
 
 export interface PopoverProps extends ChakraPopoverProps {

package/src/Components/Popover/PopoverArrow.tsx

@@ -1,4 +1,4 @@
-import { PopoverArrowProps as ChakraPopoverArrowProps, PopoverArrow as ChakraPopoverArrow } from '@chakra-ui/react';
+import { PopoverArrow as ChakraPopoverArrow, PopoverArrowProps as ChakraPopoverArrowProps } from '@chakra-ui/react';
 
 export type PopoverArrowProps = ChakraPopoverArrowProps;
 

package/src/Components/ProgressBitbot/ProgressBitbot.tsx

@@ -63,7 +63,7 @@ const ProgressBitbot = forwardRef<ProgressBitbotProps, 'div'>((props, ref) => {
 
   return (
     <Box {...rest} ref={ref}>
-      <Box as="svg" fill="currentColor" height={size} viewBox="0 0 24 24" width={size} marginX="auto">
+      <Box as="svg" fill="currentColor" height={size} marginX="auto" viewBox="0 0 24 24" width={size}>
         <g fill="currentColor" fillRule="evenodd" stroke="none" strokeWidth="1">
           <path d={dot0}>
             <animate
@@ -159,7 +159,7 @@ const ProgressBitbot = forwardRef<ProgressBitbotProps, 'div'>((props, ref) => {
       </Box>
 
       {content && (
-        <Text textAlign="center" size="1" textTransform="uppercase">
+        <Text size="1" textAlign="center" textTransform="uppercase">
           {content}
         </Text>
       )}