@bitrise/bitkit 9.24.2 → 9.25.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.24.2",
+  "version": "9.25.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Icon/Icon.tsx

@@ -6,7 +6,7 @@ import * as smallIcons from '../Icons/16x16';
 export type TypeIconName = keyof typeof bigIcons & keyof typeof smallIcons;
 export interface IconProps extends ChakraIconProps {
   name: TypeIconName;
-  size?: '16' | '24';
+  size?: '16' | '24' | '32';
 }
 
 const Icon = forwardRef<IconProps, 'svg'>(({ name, size = '24', ...rest }, ref) => {
@@ -16,7 +16,7 @@ const Icon = forwardRef<IconProps, 'svg'>(({ name, size = '24', ...rest }, ref)
     height: size,
     ...rest,
   };
-  const ThisIcon = size === '24' ? bigIcons[name] : smallIcons[name];
+  const ThisIcon = size === '16' ? smallIcons[name] : bigIcons[name];
   return <ThisIcon {...props} />;
 });
 

package/src/Components/Toast/Toast.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useToast as useChakraToast, ToastOptions as ChakraToastOptions } from '@chakra-ui/react';
+import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
 import Notification, {
   ActionProps,
@@ -14,8 +14,8 @@ export interface ToastOptions {
   description: React.ReactNode;
   status: NotificationProps['status'];
   action?: ActionProps;
-  duration?: ChakraToastOptions['duration'];
-  position?: ChakraToastOptions['position'];
+  duration?: UseToastOptions['duration'];
+  position?: UseToastOptions['position'];
   isClosable?: boolean;
   showTimestamp?: boolean;
 }
@@ -30,7 +30,7 @@ const useToast = () => {
     toast({
       isClosable: opts.isClosable,
       duration: opts.duration,
-      position: opts.position,
+      position: opts.position || 'bottom',
       render: ({ onClose }) => (
         <Notification
           boxShadow="large"

package/src/Foundations/Breakpoints/Breakpoints.ts

@@ -0,0 +1,7 @@
+const breakpoints = {
+  mobile: '0rem',
+  desktop: '53rem', // 848px
+  wide: '101rem', // 1616px
+};
+
+export default breakpoints;

package/src/theme.ts

@@ -12,6 +12,7 @@ import Notification from './Components/Notification/Notification.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
 
+import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
 import radii from './Foundations/Radii/Radii';
 import shadows from './Foundations/Shadows/Shadows';
@@ -22,6 +23,7 @@ const theme = {
   config: {
     cssVarPrefix: '',
   },
+  breakpoints,
   colors,
   ...typography,
   radii,