diff --git a/.changeset/green-worms-nail.md b/.changeset/green-worms-nail.md
new file mode 100644
index 00000000000..61c682d288e
--- /dev/null
+++ b/.changeset/green-worms-nail.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": minor
+---
+
+`Box` now accepts all [styled system props](https://styled-system.com/table/).
diff --git a/docs/content/Box.md b/docs/content/Box.md
index ea2b5dd8ac0..a5d101c9bb8 100644
--- a/docs/content/Box.md
+++ b/docs/content/Box.md
@@ -2,35 +2,73 @@
 title: Box
 ---
 
-The Box component serves as a wrapper component for most layout related needs. Use Box to set values such as `display`, `width`, `height`, and more. See the LAYOUT section of our [System Props](/system-props) documentation for the full list of available props. In practice, this component is used frequently as a wrapper around other components to achieve Box Model related styling.
-
-## Default example
-
-```jsx live live
-<Box>
-  Box can be used to create both{' '}
-  <Box as="span" color="text.inverse" bg="bg.successInverse">
-    inline
-  </Box>{' '}
-  and
-  <Box color="text.inverse" bg="bg.dangerInverse">
-    block-level elements,
+import {Props} from '../src/props'
+import {Box} from '@primer/components'
+
+Box is a low-level utility component that accepts [styled system props](https://styled-system.com/table/) to enable custom theme-aware styling.
+
+```jsx live
+<Box color="text.secondary" bg="bg.tertiary" p={3}>
+  Hello
+</Box>
+```
+
+## Props
+
+<Props of={Box} />
+
+Box also accepts all [styled system props](https://styled-system.com/table/).
+
+## Examples
+
+### Border on all sides
+
+```jsx live
+<Box borderColor="border.primary" borderWidth={1} borderStyle="solid" p={3}>
+  Hello
+</Box>
+```
+
+### Border on one side
+
+```jsx live
+<Box borderColor="border.primary" borderBottomWidth={1} borderBottomStyle="solid" pb={3}>
+  Hello
+</Box>
+```
+
+### Flexbox
+
+Use Box to create [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) layouts.
+
+```jsx live
+<Box display="flex">
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    1
   </Box>
-  <Box color="text.inverse" bg="bg.warningInverse" width={[1, 1, 1 / 2]}>
-    elements with fixed or responsive width and height,
+  <Box flexGrow={1} p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    2
   </Box>
-  <Box color="text.inverse" bg="bg.infoInverse" p={4} mt={2}>
-    and more!
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    3
   </Box>
 </Box>
 ```
 
-## System props
+### Grid
 
-Box components get the `COMMON`, `LAYOUT`, and `FLEX` categories of system props. Read our [System Props](/system-props) doc page for a full list of available props.
+Use Box to create [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids) layouts.
 
-## Component props
-
-| Prop name | Type   | Default | Description                         |
-| :-------- | :----- | :-----: | :---------------------------------- |
-| as        | String |  `div`  | sets the HTML tag for the component |
+```jsx live
+<Box display="grid" gridTemplateColumns="1fr 1fr" gridGap={3}>
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    1
+  </Box>
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    2
+  </Box>
+  <Box p={3} borderColor="border.primary" borderWidth={1} borderStyle="solid">
+    3
+  </Box>
+</Box>
+```
diff --git a/src/BorderBox.tsx b/src/BorderBox.tsx
index 3890718cbfe..8b835069130 100644
--- a/src/BorderBox.tsx
+++ b/src/BorderBox.tsx
@@ -1,13 +1,9 @@
 import styled from 'styled-components'
-import Box from './Box'
-import {BORDER, SystemBorderProps} from './constants'
-import sx from './sx'
-import {ComponentProps} from './utils/types'
+import Box, {BoxProps} from './Box'
 
-const BorderBox = styled(Box)<SystemBorderProps>`
-  ${BORDER};
-  ${sx};
-`
+export type BorderBoxProps = BoxProps
+
+const BorderBox = styled(Box)``
 
 BorderBox.defaultProps = {
   borderWidth: '1px',
@@ -16,5 +12,4 @@ BorderBox.defaultProps = {
   borderRadius: 2
 }
 
-export type BorderBoxProps = ComponentProps<typeof BorderBox>
 export default BorderBox
diff --git a/src/Box.tsx b/src/Box.tsx
index d5790f69ddd..12c2309dbe0 100644
--- a/src/Box.tsx
+++ b/src/Box.tsx
@@ -1,14 +1,54 @@
 import styled from 'styled-components'
-import {COMMON, FLEX, LAYOUT, SystemCommonProps, SystemFlexProps, SystemLayoutProps} from './constants'
+import {
+  background,
+  BackgroundProps,
+  border,
+  BorderProps,
+  color,
+  ColorProps,
+  flexbox,
+  FlexboxProps,
+  grid,
+  GridProps,
+  layout,
+  LayoutProps,
+  position,
+  PositionProps,
+  shadow,
+  ShadowProps,
+  space,
+  SpaceProps,
+  typography,
+  TypographyProps
+} from 'styled-system'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'
 
-const Box = styled.div<SystemCommonProps & SystemFlexProps & SystemLayoutProps & SxProp>`
-  ${COMMON}
-  ${FLEX}
-  ${LAYOUT}
-  ${sx};
-`
+type StyledBoxProps = SpaceProps &
+  ColorProps &
+  TypographyProps &
+  LayoutProps &
+  FlexboxProps &
+  GridProps &
+  BackgroundProps &
+  BorderProps &
+  PositionProps &
+  ShadowProps &
+  SxProp
+
+const Box = styled.div<StyledBoxProps>(
+  space,
+  color,
+  typography,
+  layout,
+  flexbox,
+  grid,
+  background,
+  border,
+  position,
+  shadow,
+  sx
+)
 
 export type BoxProps = ComponentProps<typeof Box>
 export default Box
diff --git a/src/Flex.tsx b/src/Flex.tsx
index b026b8675f8..4218fc3daa5 100644
--- a/src/Flex.tsx
+++ b/src/Flex.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components'
-import Box from './Box'
-import {ComponentProps} from './utils/types'
+import Box, {BoxProps} from './Box'
+
+export type FlexProps = BoxProps
 
 const Flex = styled(Box)``
 
@@ -8,5 +9,4 @@ Flex.defaultProps = {
   display: 'flex'
 }
 
-export type FlexProps = ComponentProps<typeof Flex>
 export default Flex
diff --git a/src/Grid.tsx b/src/Grid.tsx
index 04d7e2e0676..9d8c5880881 100644
--- a/src/Grid.tsx
+++ b/src/Grid.tsx
@@ -1,15 +1,12 @@
 import styled from 'styled-components'
-import Box from './Box'
-import {GRID, SystemGridProps} from './constants'
-import {ComponentProps} from './utils/types'
+import Box, {BoxProps} from './Box'
 
-const Grid = styled(Box)<SystemGridProps>`
-  ${GRID};
-`
+export type GridProps = BoxProps
+
+const Grid = styled(Box)``
 
 Grid.defaultProps = {
   display: 'grid'
 }
 
-export type GridProps = ComponentProps<typeof Grid>
 export default Grid
diff --git a/src/Position.tsx b/src/Position.tsx
index 41153e5c9a1..51806af7cb0 100644
--- a/src/Position.tsx
+++ b/src/Position.tsx
@@ -1,16 +1,11 @@
 import React from 'react'
 import styled from 'styled-components'
 import Box from './Box'
-import {POSITION, SystemPositionProps} from './constants'
-import sx from './sx'
 import {ComponentProps} from './utils/types'
 
-type StyledPositionProps = {as?: React.ElementType} & SystemPositionProps
+type StyledPositionProps = {as?: React.ElementType}
 
-const Position = styled(Box)<StyledPositionProps>`
-  ${POSITION};
-  ${sx};
-`
+const Position = styled(Box)<StyledPositionProps>``
 
 export type PositionProps = ComponentProps<typeof Position>
 export default Position
diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap
index a8933148916..a591902ba47 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap
+++ b/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Pagination renders consistently 1`] = `
 .c1 {
   display: inline-block;
-  display: inline-block;
 }
 
 .c2 {
diff --git a/src/__tests__/__snapshots__/AvatarStack.tsx.snap b/src/__tests__/__snapshots__/AvatarStack.tsx.snap
index d2d0d3c1302..1ad913e36db 100644
--- a/src/__tests__/__snapshots__/AvatarStack.tsx.snap
+++ b/src/__tests__/__snapshots__/AvatarStack.tsx.snap
@@ -2,10 +2,6 @@
 
 exports[`Avatar renders consistently 1`] = `
 .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -194,10 +190,6 @@ exports[`Avatar renders consistently 1`] = `
 
 exports[`Avatar respects alignRight props 1`] = `
 .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/src/__tests__/__snapshots__/Box.tsx.snap b/src/__tests__/__snapshots__/Box.tsx.snap
index aafa44314d3..d897c47fe0f 100644
--- a/src/__tests__/__snapshots__/Box.tsx.snap
+++ b/src/__tests__/__snapshots__/Box.tsx.snap
@@ -141,7 +141,6 @@ exports[`Box renders padding 3`] = `
 exports[`Box respects display 1`] = `
 .c0 {
   display: inline;
-  display: inline;
 }
 
 <div
@@ -153,7 +152,6 @@ exports[`Box respects display 1`] = `
 exports[`Box respects display 2`] = `
 .c0 {
   display: inline-block;
-  display: inline-block;
 }
 
 <div
@@ -165,7 +163,6 @@ exports[`Box respects display 2`] = `
 exports[`Box respects display 3`] = `
 .c0 {
   display: none;
-  display: none;
 }
 
 <div
@@ -177,19 +174,6 @@ exports[`Box respects display 3`] = `
 exports[`Box respects display 4`] = `
 .c0 {
   display: none;
-  display: none;
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    display: none;
-  }
-}
-
-@media screen and (min-width:768px) {
-  .c0 {
-    display: block;
-  }
 }
 
 @media screen and (min-width:544px) {
diff --git a/src/__tests__/__snapshots__/Button.tsx.snap b/src/__tests__/__snapshots__/Button.tsx.snap
index 91103dac140..2e96d6599f4 100644
--- a/src/__tests__/__snapshots__/Button.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.tsx.snap
@@ -298,7 +298,6 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 
 exports[`ButtonGroup renders consistently 1`] = `
 .c0 {
-  display: inline-block;
   display: inline-block;
   vertical-align: middle;
 }
diff --git a/src/__tests__/__snapshots__/CircleOcticon.tsx.snap b/src/__tests__/__snapshots__/CircleOcticon.tsx.snap
index 8dae7f477b8..d156ef53572 100644
--- a/src/__tests__/__snapshots__/CircleOcticon.tsx.snap
+++ b/src/__tests__/__snapshots__/CircleOcticon.tsx.snap
@@ -16,6 +16,8 @@ exports[`CircleOcticon renders consistently 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  width: 32px;
+  height: 32px;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -24,12 +26,6 @@ exports[`CircleOcticon renders consistently 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 32px;
-  height: 32px;
 }
 
 <div
diff --git a/src/__tests__/__snapshots__/Dialog.tsx.snap b/src/__tests__/__snapshots__/Dialog.tsx.snap
index 1bcb7f8f281..0e7b526d632 100644
--- a/src/__tests__/__snapshots__/Dialog.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.tsx.snap
@@ -15,10 +15,6 @@ exports[`Dialog Dialog.Header renders consistently 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   border-radius: 6px 6px 0px 0px;
   border-bottom: 1px solid #e1e4e8;
 }
@@ -122,10 +118,6 @@ Array [
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   border-radius: 6px 6px 0px 0px;
   border-bottom: 1px solid #e1e4e8;
 }
diff --git a/src/__tests__/__snapshots__/Flex.tsx.snap b/src/__tests__/__snapshots__/Flex.tsx.snap
index da3621a9bb7..8b49d4c0777 100644
--- a/src/__tests__/__snapshots__/Flex.tsx.snap
+++ b/src/__tests__/__snapshots__/Flex.tsx.snap
@@ -6,10 +6,6 @@ exports[`Flex renders consistently 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 <div
@@ -27,10 +23,6 @@ exports[`Flex respects alignContent 1`] = `
   -webkit-align-content: start;
   -ms-flex-line-pack: start;
   align-content: start;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 <div
@@ -49,10 +41,6 @@ exports[`Flex respects alignItems 1`] = `
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: start;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 <div
@@ -70,10 +58,6 @@ exports[`Flex respects flexDirection 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 <div
@@ -91,10 +75,6 @@ exports[`Flex respects flexWrap 1`] = `
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 <div
@@ -113,10 +93,6 @@ exports[`Flex respects justifyContent 1`] = `
   -webkit-justify-content: start;
   -ms-flex-pack: start;
   justify-content: start;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
 }
 
 <div
@@ -131,19 +107,6 @@ exports[`Flex respects responsive display 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    display: -webkit-inline-box;
-    display: -webkit-inline-flex;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-  }
 }
 
 @media screen and (min-width:544px) {
diff --git a/src/__tests__/__snapshots__/Grid.tsx.snap b/src/__tests__/__snapshots__/Grid.tsx.snap
index 0ceae8c105d..d9e774b5bd6 100644
--- a/src/__tests__/__snapshots__/Grid.tsx.snap
+++ b/src/__tests__/__snapshots__/Grid.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Grid renders consistently 1`] = `
 .c0 {
   display: grid;
-  display: grid;
 }
 
 <div
@@ -14,7 +13,6 @@ exports[`Grid renders consistently 1`] = `
 
 exports[`Grid respects gridArea 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-area: sidebar;
 }
@@ -27,7 +25,6 @@ exports[`Grid respects gridArea 1`] = `
 
 exports[`Grid respects gridAutoColumns 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-auto-columns: 1fr;
 }
@@ -40,7 +37,6 @@ exports[`Grid respects gridAutoColumns 1`] = `
 
 exports[`Grid respects gridAutoFlow 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-auto-flow: row;
 }
@@ -53,7 +49,6 @@ exports[`Grid respects gridAutoFlow 1`] = `
 
 exports[`Grid respects gridAutoRows 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-auto-rows: 1fr;
 }
@@ -66,7 +61,6 @@ exports[`Grid respects gridAutoRows 1`] = `
 
 exports[`Grid respects gridColumn 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-column: 1 / 2;
 }
@@ -79,7 +73,6 @@ exports[`Grid respects gridColumn 1`] = `
 
 exports[`Grid respects gridColumnGap 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-column-gap: 8px;
 }
@@ -92,7 +85,6 @@ exports[`Grid respects gridColumnGap 1`] = `
 
 exports[`Grid respects gridGap 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-gap: 4px;
 }
@@ -105,7 +97,6 @@ exports[`Grid respects gridGap 1`] = `
 
 exports[`Grid respects gridRow 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-row: 1 / 2;
 }
@@ -118,7 +109,6 @@ exports[`Grid respects gridRow 1`] = `
 
 exports[`Grid respects gridRowGap 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-row-gap: 8px;
 }
@@ -131,7 +121,6 @@ exports[`Grid respects gridRowGap 1`] = `
 
 exports[`Grid respects gridTemplateAreas 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-template-areas: sidebar main;
 }
@@ -144,7 +133,6 @@ exports[`Grid respects gridTemplateAreas 1`] = `
 
 exports[`Grid respects gridTemplateColumns 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-template-columns: 200px 1fr;
 }
@@ -157,7 +145,6 @@ exports[`Grid respects gridTemplateColumns 1`] = `
 
 exports[`Grid respects gridTemplateRows 1`] = `
 .c0 {
-  display: grid;
   display: grid;
   grid-template-rows: 200px 1fr;
 }
@@ -171,13 +158,6 @@ exports[`Grid respects gridTemplateRows 1`] = `
 exports[`Grid respects responsive display 1`] = `
 .c0 {
   display: grid;
-  display: grid;
-}
-
-@media screen and (min-width:544px) {
-  .c0 {
-    display: inline-grid;
-  }
 }
 
 @media screen and (min-width:544px) {
diff --git a/src/__tests__/__snapshots__/PointerBox.tsx.snap b/src/__tests__/__snapshots__/PointerBox.tsx.snap
index 13ead653d40..55602f32364 100644
--- a/src/__tests__/__snapshots__/PointerBox.tsx.snap
+++ b/src/__tests__/__snapshots__/PointerBox.tsx.snap
@@ -3,7 +3,6 @@
 exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
 .c0 {
   background-color: #ffeef0;
-  position: relative;
   border-width: 1px;
   border-style: solid;
   border-color: #e1e4e8;
@@ -47,7 +46,6 @@ exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
 
 exports[`PointerBox passes the "borderColor" prop to both <BorderBox> and <Caret> 1`] = `
 .c0 {
-  position: relative;
   border-color: #d73a49;
   border-width: 1px;
   border-style: solid;
@@ -91,7 +89,6 @@ exports[`PointerBox passes the "borderColor" prop to both <BorderBox> and <Caret
 
 exports[`PointerBox renders a <Caret> in <BorderBox> with relative positioning 1`] = `
 .c0 {
-  position: relative;
   border-width: 1px;
   border-style: solid;
   border-color: #e1e4e8;
@@ -135,7 +132,6 @@ exports[`PointerBox renders a <Caret> in <BorderBox> with relative positioning 1
 
 exports[`PointerBox renders consistently 1`] = `
 .c0 {
-  position: relative;
   border-width: 1px;
   border-style: solid;
   border-color: #e1e4e8;
diff --git a/src/__tests__/__snapshots__/Timeline.tsx.snap b/src/__tests__/__snapshots__/Timeline.tsx.snap
index 528e91a3765..93109ee50c1 100644
--- a/src/__tests__/__snapshots__/Timeline.tsx.snap
+++ b/src/__tests__/__snapshots__/Timeline.tsx.snap
@@ -2,10 +2,6 @@
 
 exports[`Timeline renders consistently 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -23,10 +19,6 @@ exports[`Timeline renders consistently 1`] = `
 
 exports[`Timeline renders with clipSidebar prop 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -57,10 +49,13 @@ exports[`Timeline.Badge renders consistently 1`] = `
 }
 
 .c1 {
-  color: #586069;
-  background-color: #e1e4e8;
   margin-right: 8px;
   margin-left: -15px;
+  color: #586069;
+  background-color: #e1e4e8;
+  overflow: hidden;
+  width: 32px;
+  height: 32px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -76,13 +71,6 @@ exports[`Timeline.Badge renders consistently 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  overflow: hidden;
-  width: 32px;
-  height: 32px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   border-radius: 50%;
   border: 2px solid #ffffff;
 }
@@ -103,10 +91,6 @@ exports[`Timeline.Badge renders consistently 1`] = `
 
 exports[`Timeline.Item renders consistently 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -139,10 +123,6 @@ exports[`Timeline.Item renders consistently 1`] = `
 
 exports[`Timeline.Item renders with condensed prop 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;