From a812d0e2a51bc0ae69e640cdb36ec17d024bee17 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 8 Jul 2020 03:22:38 -0300
Subject: [PATCH 1/7] Move Margins to the root level

---
 ...ng => chrome_iphone7_Layout_Margins_Default.png} | Bin
 ...g => chrome_iphone7_Layout_Margins_all_prop.png} | Bin
 ...o.png => chrome_iphone7_Layout_Margins_auto.png} | Bin
 ...chrome_iphone7_Layout_Margins_blockEnd_prop.png} | Bin
 ...rome_iphone7_Layout_Margins_blockStart_prop.png} | Bin
 ...=> chrome_iphone7_Layout_Margins_block_prop.png} | Bin
 ...hrome_iphone7_Layout_Margins_inlineEnd_prop.png} | Bin
 ...ome_iphone7_Layout_Margins_inlineStart_prop.png} | Bin
 ...> chrome_iphone7_Layout_Margins_inline_prop.png} | Bin
 ...rome_iphone7_Layout_Margins_negative_values.png} | Bin
 ...e.png => chrome_iphone7_Layout_Margins_none.png} | Bin
 ...png => chrome_laptop_Layout_Margins_Default.png} | Bin
 ...ng => chrome_laptop_Layout_Margins_all_prop.png} | Bin
 ...to.png => chrome_laptop_Layout_Margins_auto.png} | Bin
 ... chrome_laptop_Layout_Margins_blockEnd_prop.png} | Bin
 ...hrome_laptop_Layout_Margins_blockStart_prop.png} | Bin
 ... => chrome_laptop_Layout_Margins_block_prop.png} | Bin
 ...chrome_laptop_Layout_Margins_inlineEnd_prop.png} | Bin
 ...rome_laptop_Layout_Margins_inlineStart_prop.png} | Bin
 ...=> chrome_laptop_Layout_Margins_inline_prop.png} | Bin
 ...hrome_laptop_Layout_Margins_negative_values.png} | Bin
 ...ne.png => chrome_laptop_Layout_Margins_none.png} | Bin
 packages/fuselage/src/components/Box/index.js       |   1 -
 packages/fuselage/src/components/Chip/index.js      |   3 ++-
 .../src/components/{Box => }/Margins/index.js       |   6 +++---
 .../src/components/{Box => }/Margins/spec.js        |   2 +-
 .../src/components/{Box => }/Margins/stories.mdx    |   2 +-
 packages/fuselage/src/components/Modal/index.js     |   3 ++-
 packages/fuselage/src/components/Options/index.js   |   3 ++-
 .../fuselage/src/components/Select/MultiSelect.js   |   3 ++-
 packages/fuselage/src/components/Select/Select.js   |   3 ++-
 packages/fuselage/src/components/Table/index.js     |   3 ++-
 packages/fuselage/src/components/index.js           |   1 +
 33 files changed, 18 insertions(+), 12 deletions(-)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_Default.png => chrome_iphone7_Layout_Margins_Default.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_all_prop.png => chrome_iphone7_Layout_Margins_all_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_auto.png => chrome_iphone7_Layout_Margins_auto.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_blockEnd_prop.png => chrome_iphone7_Layout_Margins_blockEnd_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_blockStart_prop.png => chrome_iphone7_Layout_Margins_blockStart_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_block_prop.png => chrome_iphone7_Layout_Margins_block_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_inlineEnd_prop.png => chrome_iphone7_Layout_Margins_inlineEnd_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_inlineStart_prop.png => chrome_iphone7_Layout_Margins_inlineStart_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_inline_prop.png => chrome_iphone7_Layout_Margins_inline_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_negative_values.png => chrome_iphone7_Layout_Margins_negative_values.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Box_Modifiers_Margins_none.png => chrome_iphone7_Layout_Margins_none.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_Default.png => chrome_laptop_Layout_Margins_Default.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_all_prop.png => chrome_laptop_Layout_Margins_all_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_auto.png => chrome_laptop_Layout_Margins_auto.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_blockEnd_prop.png => chrome_laptop_Layout_Margins_blockEnd_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_blockStart_prop.png => chrome_laptop_Layout_Margins_blockStart_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_block_prop.png => chrome_laptop_Layout_Margins_block_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_inlineEnd_prop.png => chrome_laptop_Layout_Margins_inlineEnd_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_inlineStart_prop.png => chrome_laptop_Layout_Margins_inlineStart_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_inline_prop.png => chrome_laptop_Layout_Margins_inline_prop.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_negative_values.png => chrome_laptop_Layout_Margins_negative_values.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Box_Modifiers_Margins_none.png => chrome_laptop_Layout_Margins_none.png} (100%)
 rename packages/fuselage/src/components/{Box => }/Margins/index.js (89%)
 rename packages/fuselage/src/components/{Box => }/Margins/spec.js (86%)
 rename packages/fuselage/src/components/{Box => }/Margins/stories.mdx (99%)

diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_Default.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_Default.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_all_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_all_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_all_prop.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_all_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_auto.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_auto.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_auto.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_auto.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_blockEnd_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_blockEnd_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_blockEnd_prop.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_blockEnd_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_blockStart_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_blockStart_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_blockStart_prop.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_blockStart_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_block_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_block_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_block_prop.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_block_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_inlineEnd_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_inlineEnd_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_inlineEnd_prop.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_inlineEnd_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_inlineStart_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_inlineStart_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_inlineStart_prop.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_inlineStart_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_inline_prop.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_inline_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_inline_prop.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_inline_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_negative_values.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_negative_values.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_negative_values.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_negative_values.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_none.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_none.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Box_Modifiers_Margins_none.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_none.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_Default.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_Default.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_Default.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_all_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_all_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_all_prop.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_all_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_auto.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_auto.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_auto.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_auto.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_blockEnd_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_blockEnd_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_blockEnd_prop.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_blockEnd_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_blockStart_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_blockStart_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_blockStart_prop.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_blockStart_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_block_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_block_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_block_prop.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_block_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_inlineEnd_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_inlineEnd_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_inlineEnd_prop.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_inlineEnd_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_inlineStart_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_inlineStart_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_inlineStart_prop.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_inlineStart_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_inline_prop.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_inline_prop.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_inline_prop.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_inline_prop.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_negative_values.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_negative_values.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_negative_values.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_negative_values.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_none.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_none.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Box_Modifiers_Margins_none.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_none.png
diff --git a/packages/fuselage/src/components/Box/index.js b/packages/fuselage/src/components/Box/index.js
index 1149a27e20..34238d49b2 100644
--- a/packages/fuselage/src/components/Box/index.js
+++ b/packages/fuselage/src/components/Box/index.js
@@ -95,6 +95,5 @@ Box.defaultProps = {
 
 export { default as AnimatedVisibility } from './AnimatedVisibility';
 export { default as Flex } from './Flex';
-export { default as Margins } from './Margins';
 export { default as Position, PositionAnimated } from './Position';
 export { default as Scrollable } from './Scrollable';
diff --git a/packages/fuselage/src/components/Chip/index.js b/packages/fuselage/src/components/Chip/index.js
index 5d63274fa6..a2d078cdc7 100644
--- a/packages/fuselage/src/components/Chip/index.js
+++ b/packages/fuselage/src/components/Chip/index.js
@@ -1,8 +1,9 @@
 import React from 'react';
 
 import { Avatar } from '../Avatar';
-import { Box, Flex, Margins } from '../Box';
+import { Box, Flex } from '../Box';
 import { Icon } from '../Icon';
+import Margins from '../Margins';
 
 const ThumbDefault = ({ url }) => <Avatar size='x20' url={url}/>;
 const RemoveDefault = () => <Icon name='cross' size='x16' />;
diff --git a/packages/fuselage/src/components/Box/Margins/index.js b/packages/fuselage/src/components/Margins/index.js
similarity index 89%
rename from packages/fuselage/src/components/Box/Margins/index.js
rename to packages/fuselage/src/components/Margins/index.js
index c6df1921c8..0ab7fe5c71 100644
--- a/packages/fuselage/src/components/Box/Margins/index.js
+++ b/packages/fuselage/src/components/Margins/index.js
@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 
-import { BoxTransforms, useComposedBoxTransform } from '../transforms';
-import { createPropType } from '../../../helpers/createPropType';
-import { margin } from '../../../styleTokens';
+import { BoxTransforms, useComposedBoxTransform } from '../Box/transforms';
+import { createPropType } from '../../helpers/createPropType';
+import { margin } from '../../styleTokens';
 
 function Margins({
   children,
diff --git a/packages/fuselage/src/components/Box/Margins/spec.js b/packages/fuselage/src/components/Margins/spec.js
similarity index 86%
rename from packages/fuselage/src/components/Box/Margins/spec.js
rename to packages/fuselage/src/components/Margins/spec.js
index 865c3cf372..a3572df6ba 100644
--- a/packages/fuselage/src/components/Box/Margins/spec.js
+++ b/packages/fuselage/src/components/Margins/spec.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { Margins } from '../../..';
+import { Margins } from '../..';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
diff --git a/packages/fuselage/src/components/Box/Margins/stories.mdx b/packages/fuselage/src/components/Margins/stories.mdx
similarity index 99%
rename from packages/fuselage/src/components/Box/Margins/stories.mdx
rename to packages/fuselage/src/components/Margins/stories.mdx
index 7e45e53331..1cf510f871 100644
--- a/packages/fuselage/src/components/Box/Margins/stories.mdx
+++ b/packages/fuselage/src/components/Margins/stories.mdx
@@ -2,7 +2,7 @@ import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
 
 import { Box, Button, ButtonGroup, Flex, Margins, Tile } from '../../..';
 
-<Meta title='Box/Modifiers/Margins' parameters={{ jest: ['Margins/spec'] }} />
+<Meta title='Layout/Margins' parameters={{ jest: ['Margins/spec'] }} />
 
 # Margins
 
diff --git a/packages/fuselage/src/components/Modal/index.js b/packages/fuselage/src/components/Modal/index.js
index a5ad9cd3ce..30ea36d0d6 100644
--- a/packages/fuselage/src/components/Modal/index.js
+++ b/packages/fuselage/src/components/Modal/index.js
@@ -1,9 +1,10 @@
 import React from 'react';
 
 import { Avatar } from '../Avatar';
-import { Box, Flex, Margins, Scrollable } from '../Box';
+import { Box, Flex, Scrollable } from '../Box';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
+import Margins from '../Margins';
 import { Tile } from '../Tile';
 import { ModalBackdrop, ModalContainer, ModalPortal, ModalStack, useModalStack } from './Stack';
 
diff --git a/packages/fuselage/src/components/Options/index.js b/packages/fuselage/src/components/Options/index.js
index 0ebd21ba60..b6089c1d9d 100644
--- a/packages/fuselage/src/components/Options/index.js
+++ b/packages/fuselage/src/components/Options/index.js
@@ -1,9 +1,10 @@
 import React, { useCallback, useLayoutEffect, useState, forwardRef, useMemo } from 'react';
 
 
-import { AnimatedVisibility, Box, Flex, Margins, Scrollable } from '../Box';
 import { Avatar } from '../Avatar';
+import { AnimatedVisibility, Box, Flex, Scrollable } from '../Box';
 import { CheckBox } from '../CheckBox';
+import Margins from '../Margins';
 import { Tile } from '../Tile';
 
 export const ACTIONS = {
diff --git a/packages/fuselage/src/components/Select/MultiSelect.js b/packages/fuselage/src/components/Select/MultiSelect.js
index 8ca3fe0731..4ed054ae87 100644
--- a/packages/fuselage/src/components/Select/MultiSelect.js
+++ b/packages/fuselage/src/components/Select/MultiSelect.js
@@ -1,9 +1,10 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 
-import { AnimatedVisibility, Box, Flex, Margins, Position } from '../Box';
+import { AnimatedVisibility, Box, Flex, Position } from '../Box';
 import { Chip } from '../Chip';
 import { Icon } from '../Icon';
 import { InputBox } from '../InputBox';
+import Margins from '../Margins';
 import { Options, CheckOption, useCursor } from '../Options';
 import { Focus, Addon } from './Select';
 
diff --git a/packages/fuselage/src/components/Select/Select.js b/packages/fuselage/src/components/Select/Select.js
index 8c5b35608b..f3a6b8d589 100644
--- a/packages/fuselage/src/components/Select/Select.js
+++ b/packages/fuselage/src/components/Select/Select.js
@@ -1,8 +1,9 @@
 import React, { useState, useLayoutEffect, useRef, useCallback, useEffect, forwardRef } from 'react';
 
-import { PositionAnimated, Box, Flex, Margins, AnimatedVisibility } from '../Box';
+import { PositionAnimated, Box, Flex, AnimatedVisibility } from '../Box';
 import { Icon } from '../Icon';
 import { InputBox } from '../InputBox';
+import Margins from '../Margins';
 import { Options, useCursor } from '../Options';
 
 export const Addon = forwardRef((props, ref) => <Box is='div' rcx-select__addon ref={ref} {...props} />);
diff --git a/packages/fuselage/src/components/Table/index.js b/packages/fuselage/src/components/Table/index.js
index 2556c81637..6da7182c49 100644
--- a/packages/fuselage/src/components/Table/index.js
+++ b/packages/fuselage/src/components/Table/index.js
@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { createContext, useContext } from 'react';
 
-import { Box, Margins } from '../Box';
+import { Box } from '../Box';
 import { Button } from '../Button';
+import Margins from '../Margins';
 
 const style = {
   overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
diff --git a/packages/fuselage/src/components/index.js b/packages/fuselage/src/components/index.js
index db2acb334a..165a70e22a 100644
--- a/packages/fuselage/src/components/index.js
+++ b/packages/fuselage/src/components/index.js
@@ -17,6 +17,7 @@ export * from './Grid';
 export * from './Icon';
 export * from './InputBox';
 export * from './Label';
+export { default as Margins } from './Margins';
 export * from './Menu';
 export * from './Modal';
 export * from './NumberInput';

From 50e0b1d17546447e7d24790a89588f750d23ab80 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 8 Jul 2020 14:26:32 -0300
Subject: [PATCH 2/7] Rename some Box stories

---
 ...chrome_iphone7_Layout_Margins_Example.png} | Bin
 ...phone7_Layout_Margins_With_auto_value.png} | Bin
 ...7_Layout_Margins_With_negative_values.png} | Bin
 ...phone7_Layout_Margins_With_none_value.png} | Bin
 ... chrome_laptop_Layout_Margins_Example.png} | Bin
 ...laptop_Layout_Margins_With_auto_value.png} | Bin
 ...p_Layout_Margins_With_negative_values.png} | Bin
 ...laptop_Layout_Margins_With_none_value.png} | Bin
 .../src/components/Margins/stories.mdx        |  48 +++++++++---------
 9 files changed, 24 insertions(+), 24 deletions(-)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Layout_Margins_Default.png => chrome_iphone7_Layout_Margins_Example.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Layout_Margins_auto.png => chrome_iphone7_Layout_Margins_With_auto_value.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Layout_Margins_negative_values.png => chrome_iphone7_Layout_Margins_With_negative_values.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_iphone7_Layout_Margins_none.png => chrome_iphone7_Layout_Margins_With_none_value.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Layout_Margins_Default.png => chrome_laptop_Layout_Margins_Example.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Layout_Margins_auto.png => chrome_laptop_Layout_Margins_With_auto_value.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Layout_Margins_negative_values.png => chrome_laptop_Layout_Margins_With_negative_values.png} (100%)
 rename packages/fuselage/.loki/reference/{chrome_laptop_Layout_Margins_none.png => chrome_laptop_Layout_Margins_With_none_value.png} (100%)

diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_Example.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_Default.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_Example.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_auto.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_With_auto_value.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_auto.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_With_auto_value.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_negative_values.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_With_negative_values.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_negative_values.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_With_negative_values.png
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_none.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_With_none_value.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_none.png
rename to packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_With_none_value.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_Example.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_Default.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_Example.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_auto.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_With_auto_value.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_auto.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_With_auto_value.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_negative_values.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_With_negative_values.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_negative_values.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_With_negative_values.png
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_none.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_With_none_value.png
similarity index 100%
rename from packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_none.png
rename to packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_With_none_value.png
diff --git a/packages/fuselage/src/components/Margins/stories.mdx b/packages/fuselage/src/components/Margins/stories.mdx
index 1cf510f871..deccabb2b3 100644
--- a/packages/fuselage/src/components/Margins/stories.mdx
+++ b/packages/fuselage/src/components/Margins/stories.mdx
@@ -1,6 +1,6 @@
 import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
 
-import { Box, Button, ButtonGroup, Flex, Margins, Tile } from '../../..';
+import { Box, Button, ButtonGroup, Flex, Margins, Tile } from '../..';
 
 <Meta title='Layout/Margins' parameters={{ jest: ['Margins/spec'] }} />
 
@@ -9,7 +9,7 @@ import { Box, Button, ButtonGroup, Flex, Margins, Tile } from '../../..';
 Add margins to the wrapped component.
 
 <Preview>
-  <Story name='Default'>
+  <Story name='Example'>
     <ButtonGroup>
       <Button>
         Without margins
@@ -31,10 +31,10 @@ Add margins to the wrapped component.
 
 <Props of={Margins} />
 
-### `all`
+### `all` prop
 
 <Preview>
-  <Story name='all prop' decorators={[
+  <Story name='`all` prop' decorators={[
     (fn) => <Box display='flex' alignItems='center'>
       <Margins all='x8'>
         {fn()}
@@ -76,10 +76,10 @@ Add margins to the wrapped component.
   </Story>
 </Preview>
 
-### `block`
+### `block` prop
 
 <Preview>
-  <Story name='block prop' decorators={[
+  <Story name='`block` prop' decorators={[
     (fn) => <Box display='flex' alignItems='center'>
       <Margins all='x8'>
         {fn()}
@@ -121,10 +121,10 @@ Add margins to the wrapped component.
   </Story>
 </Preview>
 
-### `blockStart`
+### `blockStart` prop
 
 <Preview>
-  <Story name='blockStart prop' decorators={[
+  <Story name='`blockStart` prop' decorators={[
     (fn) => <Box display='flex' alignItems='center'>
       <Margins all='x8'>
         {fn()}
@@ -166,10 +166,10 @@ Add margins to the wrapped component.
   </Story>
 </Preview>
 
-### `blockEnd`
+### `blockEnd` prop
 
 <Preview>
-  <Story name='blockEnd prop' decorators={[
+  <Story name='`blockEnd` prop' decorators={[
     (fn) => <Box display='flex' alignItems='center'>
       <Margins all='x8'>
         {fn()}
@@ -211,10 +211,10 @@ Add margins to the wrapped component.
   </Story>
 </Preview>
 
-### `inline`
+### `inline` prop
 
 <Preview>
-  <Story name='inline prop' decorators={[
+  <Story name='`inline` prop' decorators={[
     (fn) => <Box display='flex' alignItems='center'>
       <Margins all='x8'>
         {fn()}
@@ -256,10 +256,10 @@ Add margins to the wrapped component.
   </Story>
 </Preview>
 
-### `inlineStart`
+### `inlineStart` prop
 
 <Preview>
-  <Story name='inlineStart prop' decorators={[
+  <Story name='`inlineStart` prop' decorators={[
     (fn) => <Box display='flex' alignItems='center'>
       <Margins all='x8'>
         {fn()}
@@ -301,10 +301,10 @@ Add margins to the wrapped component.
   </Story>
 </Preview>
 
-### `inlineEnd`
+### `inlineEnd` prop
 
 <Preview>
-  <Story name='inlineEnd prop' decorators={[
+  <Story name='`inlineEnd` prop' decorators={[
     (fn) => <Box display='flex' alignItems='center'>
       <Margins all='x8'>
         {fn()}
@@ -346,10 +346,10 @@ Add margins to the wrapped component.
   </Story>
 </Preview>
 
-### Negative values
+### With negative values
 
 <Preview>
-  <Story name='negative values' decorators={[
+  <Story name='With negative values' decorators={[
     (fn) => <Box display='flex' flexDirection='column' alignItems='center'>
       <Margins all='x20'>
         {fn()}
@@ -358,7 +358,7 @@ Add margins to the wrapped component.
   ]}>
     <>
       <Tile>
-        <Margins inline='neg-x40'>
+        <Margins inline='-x40'>
           <Tile display='flex' padding='none'>
             <Margins inline='x40'>
               <Tile padding='x40' />
@@ -370,7 +370,7 @@ Add margins to the wrapped component.
         </Margins>
       </Tile>
       <Tile>
-        <Margins block='neg-x40'>
+        <Margins block='-x40'>
           <Tile display='flex' padding='none'>
             <Margins block='x40'>
               <Tile padding='x40' />
@@ -385,10 +385,10 @@ Add margins to the wrapped component.
   </Story>
 </Preview>
 
-### `auto`
+### With `auto` value
 
 <Preview>
-  <Story name='auto'>
+  <Story name='With `auto` value'>
     <Tile display='flex'>
       <Tile padding='x40' />
       <Margins inline='auto'>
@@ -399,10 +399,10 @@ Add margins to the wrapped component.
   </Story>
 </Preview>
 
-### `none`
+### With `none` value
 
 <Preview>
-  <Story name='none'>
+  <Story name='With `none` value'>
     <Tile display='flex'>
       <Margins inline='x16'>
         <Tile padding='x40' />

From 68249a83180fc9d6be3133ba3332baa141703196 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 8 Jul 2020 15:39:07 -0300
Subject: [PATCH 3/7] Skip non-React elements in patchElement

---
 packages/fuselage/src/helpers/patchChildren.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/fuselage/src/helpers/patchChildren.js b/packages/fuselage/src/helpers/patchChildren.js
index 7d0cacb781..41596ddd37 100644
--- a/packages/fuselage/src/helpers/patchChildren.js
+++ b/packages/fuselage/src/helpers/patchChildren.js
@@ -1,4 +1,4 @@
-import { cloneElement } from 'react';
+import { cloneElement, isValidElement } from 'react';
 
 import { flattenChildren } from './flattenChildren';
 import { shallowEqual } from './shallowEqual';
@@ -7,6 +7,10 @@ export const patchChildren = (children, patch) => {
   let dirty = false;
 
   const newChildren = flattenChildren(children).map((child) => {
+    if (!isValidElement(child)) {
+      return child;
+    }
+
     const mergedProps = patch(child.props);
 
     if (shallowEqual(child.props, mergedProps)) {

From 5f9c11e8bdd1cbd83af4d0bc6e23d984c2c4affd Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 8 Jul 2020 15:39:27 -0300
Subject: [PATCH 4/7] Add support for not only Box children in Margins

---
 ...7_Layout_Margins_With_non_Box_children.png | Bin 0 -> 706 bytes
 ...p_Layout_Margins_With_non_Box_children.png | Bin 0 -> 571 bytes
 .../fuselage/src/components/Margins/index.js  |  53 ++++++++++++++----
 .../fuselage/src/components/Margins/spec.js   |  13 +++++
 .../src/components/Margins/stories.mdx        |  13 +++++
 5 files changed, 67 insertions(+), 12 deletions(-)
 create mode 100644 packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_With_non_Box_children.png
 create mode 100644 packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_With_non_Box_children.png

diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_With_non_Box_children.png b/packages/fuselage/.loki/reference/chrome_iphone7_Layout_Margins_With_non_Box_children.png
new file mode 100644
index 0000000000000000000000000000000000000000..dbffad50e3aeaa10b7772fb9de504fba64f6967f
GIT binary patch
literal 706
zcmeAS@N?(olHy`uVBq!ia0y~yU|I)c=WwtA$<+=96Mz(Bage(c!@6@aFM%AEVkgfK
z4j`!ENa+Bo&hd0{45^s&_O@Xbi=lw4<H<97d;Rb6U9*VVVEocC)Z`(*d~e$MsLc!v
z4~pcMvokOpsJGc4|M&wJ!-3XsaoIa}Ffj-y#xOE?2mtL>;Rt775Ngq8VBkC?%Fw{_
zkc+{gseqM1!4arzf&%@N9V)Imp!@B*oh>87gS9{BTozvU;1P;jHl(k;zPR&a852VT
z_uK3HJ@f{X>k&crVUAou_g;T}28N3KXJ4AEcc6x2#p7RxZwoRs>;^>xJ;N8_LcEcB
nXx`RmUpN>Tesp(((!~9#NrKnzy$ZYzOot4fu6{1-oD!M<OgXyq

literal 0
HcmV?d00001

diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_With_non_Box_children.png b/packages/fuselage/.loki/reference/chrome_laptop_Layout_Margins_With_non_Box_children.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca42edc54cd787dca66623bc19942e573e93f25a
GIT binary patch
literal 571
zcmeAS@N?(olHy`uVBq!ia0y~yU^N4>%{bVA<X@p<^MMp&age(c!@6@aFM%AEVkgfK
z4j`!ENa+B|J@s^P45^s&_SV5n7DoY=gK`_|xFhcsCB8SEE|BQBce0iBW@ex^27ym!
z&Ya1b4PrVRvHV<I4HiAHyu}wJq~Lyo1w<Fojyvx*b6VQD`#WtJK^9eH)_?!T(hs(L
z!Sgp~&fU{r0}^LgKj-mAP7vb@2gI>`8^GKrwBy=rXFqdhPH{EZVIQu&d&?>ZvHC)|
yjoJQ%ADBSSk%fxU-Z@Z@p1V17uPxZ>2g3j7W(j8Pb34Nha*3y_pUXO@geCxF(v3<0

literal 0
HcmV?d00001

diff --git a/packages/fuselage/src/components/Margins/index.js b/packages/fuselage/src/components/Margins/index.js
index 0ab7fe5c71..1545560f5f 100644
--- a/packages/fuselage/src/components/Margins/index.js
+++ b/packages/fuselage/src/components/Margins/index.js
@@ -1,19 +1,26 @@
 import React, { useCallback } from 'react';
+import { css } from '@rocket.chat/css-in-js';
 
-import { BoxTransforms, useComposedBoxTransform } from '../Box/transforms';
+import { appendClassName } from '../../helpers/appendClassName';
 import { createPropType } from '../../helpers/createPropType';
+import { patchChildren } from '../../helpers/patchChildren';
+import { useStyle } from '../../hooks/useStyle';
 import { margin } from '../../styleTokens';
+import { BoxTransforms, useComposedBoxTransform } from '../Box/transforms';
+
+function Margins(props) {
+  const {
+    children,
+    className,
+    all,
+    block,
+    blockStart,
+    blockEnd,
+    inline,
+    inlineStart,
+    inlineEnd,
+  } = props;
 
-function Margins({
-  children,
-  all,
-  block,
-  blockStart,
-  blockEnd,
-  inline,
-  inlineStart,
-  inlineEnd,
-}) {
   const transformFn = useCallback((props) => {
     if (all !== undefined && props.margin === undefined) {
       props.margin = all;
@@ -46,8 +53,30 @@ function Margins({
     return props;
   }, [all, block, blockEnd, blockStart, inline, inlineEnd, inlineStart]);
 
+  const marginsClassName = useStyle(css`
+    &:not(.rcx-box) {
+      ${ props.all && css`margin: ${ margin(props.all) };` }
+      ${ props.inline && css`margin-inline: ${ margin(props.inline) };` }
+      ${ props.inlineStart && css`margin-inline-start: ${ margin(props.inlineStart) };` }
+      ${ props.inlineEnd && css`margin-inline-end: ${ margin(props.inlineEnd) };` }
+      ${ props.block && css`margin-block: ${ margin(props.block) };` }
+      ${ props.blockStart && css`margin-block-start: ${ margin(props.blockStart) };` }
+      ${ props.blockEnd && css`margin-block-end: ${ margin(props.blockEnd) };` }
+    }
+  `, props);
+
+  const patchedChildren = patchChildren(children, (childProps) => ({
+    className: appendClassName(
+      appendClassName(
+        childProps.className,
+        marginsClassName,
+      ),
+      className,
+    ),
+  }));
+
   return <BoxTransforms.Provider
-    children={children}
+    children={patchedChildren}
     value={useComposedBoxTransform(transformFn)}
   />;
 }
diff --git a/packages/fuselage/src/components/Margins/spec.js b/packages/fuselage/src/components/Margins/spec.js
index a3572df6ba..6607113650 100644
--- a/packages/fuselage/src/components/Margins/spec.js
+++ b/packages/fuselage/src/components/Margins/spec.js
@@ -8,3 +8,16 @@ it('renders without crashing', () => {
   ReactDOM.render(<Margins />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+
+it('patches non-`Box` children', () => {
+  const root = document.createElement('div');
+  ReactDOM.render(<Margins all='10px'>
+    <div />
+  </Margins>, root);
+
+  const div = root.firstChild;
+  expect(getComputedStyle(div).marginLeft).toBe('10px');
+  expect(getComputedStyle(div).marginTop).toBe('10px');
+  expect(getComputedStyle(div).marginRight).toBe('10px');
+  expect(getComputedStyle(div).marginBottom).toBe('10px');
+});
diff --git a/packages/fuselage/src/components/Margins/stories.mdx b/packages/fuselage/src/components/Margins/stories.mdx
index deccabb2b3..a3e78486b7 100644
--- a/packages/fuselage/src/components/Margins/stories.mdx
+++ b/packages/fuselage/src/components/Margins/stories.mdx
@@ -417,3 +417,16 @@ Add margins to the wrapped component.
     </Tile>
   </Story>
 </Preview>
+
+### With non-`Box` children
+
+<Preview>
+  <Story name='With non-`Box` children'>
+    <div style={{ border: '1px solid red' }}>
+      <Margins block='x16' inline='x32'>
+        <div style={{ border: '1px solid green' }} />
+        <div style={{ border: '1px solid blue' }} />
+      </Margins>
+    </div>
+  </Story>
+</Preview>

From 4e9d74002f401991f07c432a39472ce2fc2d29df Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Wed, 8 Jul 2020 19:01:26 -0300
Subject: [PATCH 5/7] Fix className appending

---
 packages/fuselage/src/components/Margins/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/Margins/index.js b/packages/fuselage/src/components/Margins/index.js
index 1545560f5f..3669eea4b5 100644
--- a/packages/fuselage/src/components/Margins/index.js
+++ b/packages/fuselage/src/components/Margins/index.js
@@ -67,11 +67,11 @@ function Margins(props) {
 
   const patchedChildren = patchChildren(children, (childProps) => ({
     className: appendClassName(
+      childProps.className,
       appendClassName(
-        childProps.className,
+        className,
         marginsClassName,
       ),
-      className,
     ),
   }));
 

From 4135b3f69f920dcc5cbd71603d33e4a237a54fca Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Fri, 10 Jul 2020 21:47:49 -0300
Subject: [PATCH 6/7] Use .rcx-box--full to completely style the Box component

---
 packages/fuselage/src/components/Box/index.js |  2 +-
 .../fuselage/src/components/Box/styles.scss   | 14 +++++++++----
 .../fuselage/src/components/Margins/index.js  |  2 +-
 .../fuselage/src/styles/primitives/box.scss   | 21 +++++++++++++++----
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/packages/fuselage/src/components/Box/index.js b/packages/fuselage/src/components/Box/index.js
index 34238d49b2..6e074e5ba0 100644
--- a/packages/fuselage/src/components/Box/index.js
+++ b/packages/fuselage/src/components/Box/index.js
@@ -39,7 +39,7 @@ export const useBoxOnlyProps = (props) => {
     }
   });
 
-  props.className = prependClassName(props.className, 'rcx-box');
+  props.className = prependClassName(props.className, 'rcx-box rcx-box--full');
 
   return props;
 };
diff --git a/packages/fuselage/src/components/Box/styles.scss b/packages/fuselage/src/components/Box/styles.scss
index be6852295d..2ee4b979d4 100644
--- a/packages/fuselage/src/components/Box/styles.scss
+++ b/packages/fuselage/src/components/Box/styles.scss
@@ -1,7 +1,13 @@
 .rcx-box {
-  &,
-  &::before,
-  &::after {
-    @extend %box;
+  @extend %box;
+
+  &--full {
+    @extend %box--full;
+
+    &::before,
+    &::after {
+      @extend %box;
+      @extend %box--full;
+    }
   }
 }
diff --git a/packages/fuselage/src/components/Margins/index.js b/packages/fuselage/src/components/Margins/index.js
index 3669eea4b5..88e470330c 100644
--- a/packages/fuselage/src/components/Margins/index.js
+++ b/packages/fuselage/src/components/Margins/index.js
@@ -54,7 +54,7 @@ function Margins(props) {
   }, [all, block, blockEnd, blockStart, inline, inlineEnd, inlineStart]);
 
   const marginsClassName = useStyle(css`
-    &:not(.rcx-box) {
+    &:not(.rcx-box--full) {
       ${ props.all && css`margin: ${ margin(props.all) };` }
       ${ props.inline && css`margin-inline: ${ margin(props.inline) };` }
       ${ props.inlineStart && css`margin-inline-start: ${ margin(props.inlineStart) };` }
diff --git a/packages/fuselage/src/styles/primitives/box.scss b/packages/fuselage/src/styles/primitives/box.scss
index 84ba395615..63664c711f 100644
--- a/packages/fuselage/src/styles/primitives/box.scss
+++ b/packages/fuselage/src/styles/primitives/box.scss
@@ -5,18 +5,31 @@
   flex: 0 1 auto;
 
   box-sizing: border-box;
-  margin: lengths.margin(none);
-  padding: lengths.padding(none);
+
+  outline: none;
+
+  font-variant-numeric: tabular-nums;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+%box--full {
+  margin: lengths.margin('none');
+  padding: lengths.padding('none');
 
   transition: all 230ms;
 
-  border-width: lengths.border-width(none);
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+
+  border-width: lengths.border-width('none');
   border-style: solid;
   border-color: currentColor;
 
   outline: none;
 
-  font-family: typography.font-family(sans);
+  font-family: typography.font-family('sans');
   font-variant-numeric: tabular-nums;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

From 3de691fa3fa27c77661c6a5da3997aab66ae3453 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Mon, 13 Jul 2020 16:54:19 -0300
Subject: [PATCH 7/7] Opss

---
 packages/fuselage/src/components/Options/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/Options/index.js b/packages/fuselage/src/components/Options/index.js
index c2fe25bdde..4d6e2a24eb 100644
--- a/packages/fuselage/src/components/Options/index.js
+++ b/packages/fuselage/src/components/Options/index.js
@@ -1,10 +1,9 @@
 import React, { useCallback, useLayoutEffect, useState, forwardRef, useMemo } from 'react';
 
 
-import { AnimatedVisibility, Box, Margins, Scrollable } from '../Box';
+import { AnimatedVisibility, Box, Scrollable } from '../Box';
 import { Icon } from '../Icon';
 import { Avatar } from '../Avatar';
-import { AnimatedVisibility, Box, Scrollable } from '../Box';
 import { CheckBox } from '../CheckBox';
 import Margins from '../Margins';
 import { Tile } from '../Tile';