Bump styled-system and @types/styled-system

web/packages/design/src/Box/Box.tsx

@@ -21,11 +21,7 @@ import styled from 'styled-components';
 import {
   alignSelf,
   AlignSelfProps,
-  borderColor,
-  BorderColorProps,
   BorderProps,
-  borderRadius,
-  BorderRadiusProps,
   borders,
   BordersProps,
   color,
@@ -72,9 +68,7 @@ export interface BoxProps
     JustifySelfProps,
     BorderProps,
     BordersProps,
-    BorderRadiusProps,
-    OverflowProps,
-    BorderColorProps {}
+    OverflowProps {}
 
 const Box = styled.div<BoxProps>`
   box-sizing: border-box;
@@ -92,9 +86,7 @@ const Box = styled.div<BoxProps>`
   ${alignSelf}
   ${justifySelf}
   ${borders}
-  ${borderRadius}
   ${overflow}
-  ${borderColor}
 `;
 
 Box.displayName = 'Box';

web/packages/design/src/Dialog/DialogContent.jsx

@@ -19,13 +19,16 @@
 import styled from 'styled-components';
 
 import { Flex } from 'design';
+import { flex, space } from 'styled-system';
 
-const DialogContent = styled(Flex)``;
-DialogContent.defaultProps = {
-  ...Flex.defaultProps,
-  mb: '5',
-  flex: '1',
-  flexDirection: 'column',
-};
+const DialogContent = styled(Flex)`
+  margin-bottom: ${props => props.theme.space[5]}px;
+  flex: 1;
+  flex-direction: column;
+
+  /* Allow overriding space and flex settings. */
+  ${space}
+  ${flex}
+`;
 
 export default DialogContent;

web/packages/design/src/Image/Image.jsx → web/packages/design/src/Image/Image.tsx

@@ -21,16 +21,35 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
 import {
-  space,
+  alignSelf,
+  AlignSelfProps,
   color,
-  width,
+  ColorProps,
   height,
-  maxWidth,
+  HeightProps,
   maxHeight,
-  alignSelf,
+  MaxHeightProps,
+  maxWidth,
+  MaxWidthProps,
+  space,
+  SpaceProps,
+  width,
+  WidthProps,
 } from 'design/system';
 
-const Image = props => {
+interface ImageProps
+  extends SpaceProps,
+    ColorProps,
+    WidthProps,
+    HeightProps,
+    MaxWidthProps,
+    MaxHeightProps,
+    AlignSelfProps {
+  alt?: string;
+  style?: React.CSSProperties;
+}
+
+const Image = (props: ImageProps) => {
   return <StyledImg {...props} />;
 };
 
@@ -49,7 +68,7 @@ Image.displayName = 'Logo';
 
 export default Image;
 
-const StyledImg = styled.img`
+const StyledImg = styled.img<ImageProps>`
   display: block;
   outline: none;
   ${color} ${space} ${width} ${height} ${maxWidth} ${maxHeight} ${alignSelf}

web/packages/design/src/LabelInput/LabelInput.tsx

@@ -33,6 +33,7 @@ const LabelInput = styled.label<LabelInputProps>`
   display: block;
   font-size: ${p => p.theme.fontSizes[1]}px;
   width: 100%;
+  margin-bottom: ${props => props.theme.space[1]}px;
   ${space}
 `;
 
@@ -42,7 +43,6 @@ LabelInput.propTypes = {
 
 LabelInput.defaultProps = {
   hasError: false,
-  mb: 1,
 };
 
 LabelInput.displayName = 'LabelInput';

web/packages/design/src/LabelState/LabelState.tsx

@@ -101,7 +101,7 @@ const LabelState = styled.span<LabelStateProps>`
   min-height: 16px;
   line-height: 1.4;
   padding: 0 8px;
-  font-size: 10px;
+  font-size: ${props => props.theme.fontSizes[0]}px;
   font-weight: 500;
   text-transform: uppercase;
   ${space}
@@ -111,7 +111,6 @@ const LabelState = styled.span<LabelStateProps>`
   ${fontSize}
 `;
 LabelState.defaultProps = {
-  fontSize: 0,
   shadow: false,
 };
 

web/packages/design/src/Menu/MenuItemIcon.jsx

@@ -19,6 +19,8 @@
 import styled from 'styled-components';
 
 const MenuItemIcon = styled.span`
+  font-size: ${props => props.theme.fontSizes[4]}px;
+  margin-right: ${props => props.theme.space[2]}px;
   &:hover,
   &:focus {
     color: ${props => props.theme.colors.text.main};
@@ -30,9 +32,5 @@ const MenuItemIcon = styled.span`
 `;
 
 MenuItemIcon.displayName = 'MenuItemIcon';
-MenuItemIcon.defaultProps = {
-  fontSize: 4,
-  mr: 2,
-};
 
 export default MenuItemIcon;

web/packages/design/src/SideNav/SideNavItem.jsx

@@ -23,6 +23,8 @@ import Flex from './../Flex';
 
 const fromTheme = ({ theme }) => {
   return {
+    paddingLeft: `${theme.space[9]}px`,
+    paddingRight: `${theme.space[5]}px`,
     background: theme.colors.levels.surface,
     color: theme.colors.text.slightlyMuted,
     fontSize: theme.fontSizes[1],
@@ -54,11 +56,4 @@ const SideNavItem = styled(Flex)`
 
 SideNavItem.displayName = 'SideNavItem';
 
-SideNavItem.defaultProps = {
-  pl: 9,
-  pr: 5,
-  bg: 'levels.surfaceSecondary',
-  color: 'text.main',
-};
-
 export default SideNavItem;

web/packages/design/src/SideNav/SideNavItemIcon.jsx

@@ -32,13 +32,11 @@ const SideNavItemIcon = styled.svg`
   }
 
   opacity: 0.56;
+  font-size: ${props => props.theme.fontSizes[4]}px;
+  margin-right: ${props => props.theme.space[3]}px;
+  margin-left: -${props => props.theme.space[6]}px;
 `;
 
 SideNavItemIcon.displayName = 'SideNavItemIcon';
-SideNavItemIcon.defaultProps = {
-  fontSize: 4,
-  mr: 3,
-  ml: -6,
-};
 
 export default SideNavItemIcon;

web/packages/design/src/Text/Text.tsx

@@ -55,6 +55,7 @@ const Text = styled.div.withConfig({
 })<TextProps>`
   overflow: hidden;
   text-overflow: ellipsis;
+  margin: 0;
   ${typography}
   ${fontSize}
   ${space}
@@ -65,8 +66,4 @@ const Text = styled.div.withConfig({
 
 Text.displayName = 'Text';
 
-Text.defaultProps = {
-  m: 0,
-};
-
 export default Text;

web/packages/design/src/system/index.ts

@@ -25,6 +25,8 @@ import {
   type BorderProps,
   borderColor,
   type BorderColorProps,
+  borderRadius,
+  type BorderRadiusProps,
   borders,
   type BordersProps,
   color,
@@ -73,7 +75,6 @@ import {
 import { Property } from 'csstype';
 
 import typography, { type TypographyProps } from './typography';
-import borderRadius, { type BorderRadiusProps } from './borderRadius';
 
 const gap = style({
   prop: 'gap',

web/packages/teleport/src/components/Layout/Layout.jsx

@@ -18,6 +18,7 @@
 
 import styled from 'styled-components';
 import { Flex, Text } from 'design';
+import { alignItems, space } from 'design/system';
 
 /**
  * Header
@@ -28,14 +29,14 @@ const FeatureHeader = styled(Flex)`
   height: 56px;
   margin-left: -40px;
   margin-right: -40px;
+  margin-bottom: ${props => props.theme.space[4]}px;
   padding-left: 40px;
   padding-right: 40px;
-`;
+  align-items: center;
 
-FeatureHeader.defaultProps = {
-  alignItems: 'center',
-  mb: 4,
-};
+  ${space}
+  ${alignItems}
+`;
 
 /**
  * Header Title
@@ -56,6 +57,8 @@ const FeatureBox = styled(Flex)`
   width: 100%;
   height: 100%;
   flex-direction: column;
+  padding-left: ${props => props.theme.space[6]}px;
+  padding-right: ${props => props.theme.space[6]}px;
   /*
     This hack adds space to the bottom.
     Directly assigning padding-bottom does not work as flex container ignores this child padding.
@@ -66,11 +69,10 @@ const FeatureBox = styled(Flex)`
     content: ' ';
     padding-bottom: 24px;
   }
-`;
 
-FeatureBox.defaultProps = {
-  px: 6,
-};
+  /* Allow overriding padding settings. */
+  ${space}
+`;
 
 /**
  * Layout