@bitrise/bitkit 13.146.0 → 13.148.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.146.0",
+  "version": "13.148.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Dialog/Dialog.theme.ts

@@ -18,7 +18,7 @@ const DialogTheme: ComponentStyleConfig = {
       borderRadius: '8',
       boxShadow: 'large',
       marginY: '10vh',
-      maxH: scrollBehavior === 'inside' ? '70vh' : undefined,
+      maxH: scrollBehavior === 'inside' ? '80vh' : undefined,
     },
     dialogContainer: {
       alignItems: 'flex-start',

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -1,3 +1,4 @@
+import { rem } from '../../utils/utils';
 import { DropdownProps } from './DropdownProps';
 
 type DropdownStateProps = Pick<DropdownProps<string | null>, 'disabled' | 'readOnly' | 'isWarning' | 'isError'> & {
@@ -166,8 +167,8 @@ const DropdownTheme = {
         fontSize: '3',
         gap: '0.625rem',
         height: '48',
-        paddingLeft: '16',
-        paddingRight: '16',
+        paddingLeft: rem('15'),
+        paddingRight: rem('15'),
       },
     },
     md: {
@@ -175,8 +176,8 @@ const DropdownTheme = {
         fontSize: '2',
         gap: '0.375rem',
         height: '40',
-        paddingLeft: '12',
-        paddingRight: '12',
+        paddingLeft: rem('11'),
+        paddingRight: rem('11'),
       },
     },
   },

package/src/Components/Form/Input/Input.theme.ts

@@ -82,14 +82,12 @@ const InputTheme = defineStyle({
       field: {
         fontSize: '3',
         height: '48',
-        paddingLeft: '16',
       },
     },
     md: {
       field: {
         fontSize: '2',
         height: '40',
-        paddingLeft: '12',
       },
     },
   },

package/src/Components/Form/Input/Input.tsx

@@ -142,11 +142,14 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
     value,
   };
 
+  const inputInlinePadding = size === 'lg' ? '15' : '11';
+
   const RightContentWrapper = rightAddonPlacement === 'inside' ? InputRightElement : InputRightAddon;
-  const inputRightPadding = rightIconName || (rightAddon && rightAddonPlacement === 'inside') ? '43px' : '11px';
+  const inputRightPadding =
+    rightIconName || (rightAddon && rightAddonPlacement === 'inside') ? '43px' : inputInlinePadding;
 
   const LeftContentWrapper = leftAddonPlacement === 'inside' ? InputLeftElement : InputLeftAddon;
-  const inputLeftPadding = leftIconName || (leftAddon && leftAddonPlacement === 'inside') ? '43px' : '11px';
+  const inputLeftPadding = leftIconName || (leftAddon && leftAddonPlacement === 'inside') ? '43px' : inputInlinePadding;
 
   const [valueLength, setValueLength] = useState(value?.toString().length || 0);
 

package/src/Components/Form/Textarea/Textarea.theme.ts

@@ -1,12 +1,13 @@
 import { defineStyle } from '@chakra-ui/styled-system';
 import InputTheme from '../Input/Input.theme';
+import { rem } from '../../../utils/utils';
 
 const TextareaTheme = defineStyle({
   baseStyle: {
     ...InputTheme.baseStyle?.field,
     display: 'block',
     minHeight: '96',
-    padding: '0.6875rem',
+    padding: rem('11'),
   },
 });
 

package/src/Components/Select/Select.theme.ts

@@ -62,7 +62,7 @@ const SelectTheme: StyleConfig = {
         fontSize: '3',
         gap: '0.625rem',
         height: '48',
-        paddingLeft: '16',
+        paddingLeft: rem('15'),
       },
     },
     md: {
@@ -70,7 +70,7 @@ const SelectTheme: StyleConfig = {
         fontSize: '2',
         gap: '0.375rem',
         height: '40',
-        paddingLeft: '12',
+        paddingLeft: rem('11'),
       },
     },
   },