fixes circular dependencies

components/src/Button/Button.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { space } from "styled-system";
 import React from "react";
 import PropTypes from "prop-types";
-import { Icon } from "ComponentsRoot";
+import Icon from "../Icon/Icon";
 import theme from "../theme";
 import icons from "../../icons/icons.json";
 import { subPx, omit } from "../Utils";

components/src/Button/DangerButton.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { darken } from "polished";
-import { Button } from "ComponentsRoot";
+import Button from "./Button";
 import theme from "../theme";
 
 const DangerButton = styled(Button)(({ disabled }) => ({

components/src/Button/IconicButton.js

@@ -2,7 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { space } from "styled-system";
-import { Icon, Text } from "ComponentsRoot";
+import Icon from "../Icon/Icon";
+import Text from "../Type/Text";
 import theme from "../theme";
 import icons from "../../icons/icons.json";
 

components/src/Button/PrimaryButton.js

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { darken } from "polished";
-import { Button } from "ComponentsRoot";
+import Button from "./Button";
 import theme from "../theme";
 
 const PrimaryButton = styled(Button)(({ disabled }) => ({

components/src/Button/QuietButton.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Button } from "ComponentsRoot";
+import Button from "./Button";
 import theme from "../theme";
 
 const QuietButton = styled(Button)({

components/src/Checkbox/Checkbox.js

@@ -1,7 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { Box, Text } from "ComponentsRoot";
+import Box from "../Box/Box";
+import Text from "../Type/Text";
 import theme from "../theme";
 import { ClickInputLabel } from "../Utils";
 

components/src/Checkbox/CheckboxGroup.js

@@ -1,13 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Box,
-  Checkbox,
-  HelpText,
-  InlineValidation,
-  RequirementText,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
+import Checkbox from "./Checkbox";
+import HelpText from "../FieldLabel/HelpText";
+import InlineValidation from "../Validation/InlineValidation";
+import RequirementText from "../FieldLabel/RequirementText";
 import Fieldset from "../Form/Fieldset";
 
 const getCheckboxButtons = props => {

components/src/DemoPage/DemoPage.js

@@ -1,29 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Title,
-  PrimaryButton,
-  QuietButton,
-  IconicButton,
-  Box,
-  Flex,
-  Input,
-  Form,
-  FormSection,
-  Checkbox,
-  CheckboxGroup,
-  Radio,
-  RadioGroup,
-  Toggle,
-  HeaderValidation,
-  List,
-  ListItem,
-  Select,
-  Text,
-  Link,
-  NavBar,
-} from "ComponentsRoot";
+import Title from "../Type/Headings";
+import PrimaryButton from "../Button/PrimaryButton";
+import QuietButton from "../Button/QuietButton";
+import IconicButton from "../Button/IconicButton";
+import Box from "../Box/Box";
+import Flex from "../Flex/Flex";
+import Input from "../Input/Input";
+import Form from "../Form/Form";
+import FormSection from "../Form/FormSection";
+import Checkbox from "../Checkbox/Checkbox";
+import CheckboxGroup from "../Checkbox/CheckboxGroup";
+import Radio from "../Radio/Radio";
+import RadioGroup from "../Radio/RadioGroup";
+import Toggle from "../Toggle/Toggle";
+import HeaderValidation from "../Validation/HeaderValidation";
+import List from "../List/List";
+import ListItem from "../List/ListItem";
+import Select from "../Select/Select";
+import Text from "../Type/Text";
+import Link from "../Link/Link";
+import NavBar from "../NavBar/NavBar";
 import theme from "../theme";
 
 const menuData = {

components/src/FieldLabel/FieldLabel.js

@@ -2,7 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { space } from "styled-system";
 import PropTypes from "prop-types";
-import { Box, RequirementText, HelpText } from "ComponentsRoot";
+import Box from "../Box/Box";
+import RequirementText from "./RequirementText";
+import HelpText from "./HelpText";
 import theme from "../theme";
 
 const Label = styled.label(

components/src/FieldLabel/HelpText.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Text } from "ComponentsRoot";
+import Text from "../Type/Text";
 import theme from "../theme";
 
 const HelpText = props => (

components/src/FieldLabel/MaybeFieldLabel.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { FieldLabel } from "ComponentsRoot";
+import FieldLabel from "./FieldLabel";
 
 const MaybeFieldLabel = ({
   labelText,

components/src/FieldLabel/RequirementText.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Text } from "ComponentsRoot";
+import Text from "../Type/Text";
 
 const RequirementText = props => (
   <Text

components/src/Flex/Flex.js

@@ -5,7 +5,7 @@ import {
   flexWrap,
   flexDirection,
 } from "styled-system";
-import { Box } from "ComponentsRoot";
+import Box from "../Box/Box";
 
 const Flex = styled(Box)(
   {

components/src/Form/Field.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { Box } from "ComponentsRoot";
+import Box from "../Box/Box";
 
 const Field = styled(Box)({
   width: "100%",

components/src/Form/Form.js

@@ -2,11 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import { space } from "styled-system";
 import PropTypes from "prop-types";
-import {
-  SectionTitle,
-  Field,
-  HeaderValidation,
-} from "ComponentsRoot";
+import SectionTitle from "../Type/Headings";
+import Field from "./Field";
+import HeaderValidation from "../Validation/HeaderValidation";
 import Fieldset from "./Fieldset";
 import FormSection from "./FormSection";
 import theme from "../theme";

components/src/Form/FormSection.js

@@ -1,10 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-import {
-  SubsectionTitle,
-  Field,
-} from "ComponentsRoot";
+import SubsectionTitle from "../Type/Headings";
+import Field from "./Field";
 import Fieldset from "./Fieldset";
 import theme from "../theme";
 

components/src/Input/Input.js

@@ -3,7 +3,9 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 import { transparentize } from "polished";
 import { space } from "styled-system";
-import { Field, MaybeFieldLabel, InlineValidation } from "ComponentsRoot";
+import Field from "../Form/Field";
+import MaybeFieldLabel from "../FieldLabel/MaybeFieldLabel";
+import InlineValidation from "../Validation/InlineValidation";
 import theme from "../theme";
 import { subPx } from "../Utils";
 

components/src/List/List.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import {
   space, color, fontSize, fontWeight, lineHeight,
 } from "styled-system";
-import { ListItem } from "ComponentsRoot";
+import ListItem from "./ListItem";
 import theme from "../theme";
 
 const List = styled.ul(

components/src/NavBar/Branding.js

@@ -1,9 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Box,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
 import theme from "../theme";
 
 const BaseBranding = ({

components/src/NavBar/DesktopMenu.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { Flex } from "ComponentsRoot";
+import Flex from "../Flex/Flex";
 import MenuTrigger from "./MenuTrigger";
 import MenuLink from "./MenuLink";
 import theme from "../theme";

components/src/NavBar/MenuTrigger.js

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { Manager, Reference, Popper } from "react-popper";
-import theme from "ComponentsRoot/theme";
+import theme from "../theme";
 import Icon from "../Icon/Icon";
 import SubMenu from "./SubMenu";
 import SubMenuTrigger from "./SubMenuTrigger";

components/src/NavBar/MobileMenu.js

@@ -1,12 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Box,
-  Icon,
-  SubsectionTitle,
-  Text,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
+import Icon from "../Icon/Icon";
+import SubsectionTitle from "../Type/Headings";
+import Text from "../Type/Text";
 import SubMenuLink from "./SubMenuLink";
 import MenuLink from "./MenuLink";
 import theme from "../theme";

components/src/NavBar/NavBar.js

@@ -1,11 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Box,
-  Flex,
-  NavBarSearch,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
+import Flex from "../Flex/Flex";
+import NavBarSearch from "../NavBarSearch/NavBarSearch";
 import Branding from "./Branding";
 import DesktopMenu from "./DesktopMenu";
 import MobileMenu from "./MobileMenu";

components/src/NavBar/SubMenu.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
-import theme from "ComponentsRoot/theme";
+import theme from "../theme";
 
 const subMenuStyles = {
   backgroundColor: theme.colors.whiteGrey,

components/src/NavBar/SubMenuTrigger.js

@@ -2,8 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { Manager, Reference, Popper } from "react-popper";
-import theme from "ComponentsRoot/theme";
-import { Text, Icon } from "ComponentsRoot";
+import theme from "../theme";
+import Text from "../Type/Text";
+import Icon from "../Icon/Icon";
 import SubMenu from "./SubMenu";
 import SubMenuLink from "./SubMenuLink";
 

components/src/NavBarSearch/NavBarSearch.js

@@ -2,11 +2,9 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { darken, transparentize } from "polished";
-import {
-  Flex,
-  Input,
-  Icon,
-} from "ComponentsRoot";
+import Flex from "../Flex/Flex";
+import Input from "../Input/Input";
+import Icon from "../Icon/Icon";
 import theme from "../theme";
 
 class BaseNavBarSearch extends React.Component {

components/src/Radio/Radio.js

@@ -1,7 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import { Box, Text } from "ComponentsRoot";
+import Box from "../Box/Box";
+import Text from "../Type/Text";
 import theme from "../theme";
 import { ClickInputLabel } from "../Utils";
 

components/src/Radio/RadioGroup.js

@@ -1,13 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Box,
-  Radio,
-  HelpText,
-  InlineValidation,
-  RequirementText,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
+import Radio from "./Radio";
+import HelpText from "../FieldLabel/HelpText";
+import InlineValidation from "../Validation/InlineValidation";
+import RequirementText from "../FieldLabel/RequirementText";
 import Fieldset from "../Form/Fieldset";
 
 const getRadioButtons = props => {

components/src/Select/Select.js

@@ -3,9 +3,10 @@ import PropTypes from "prop-types";
 import Downshift from "downshift";
 import styled from "styled-components";
 import { transparentize } from "polished";
-import {
-  Field, Icon, MaybeFieldLabel, InlineValidation,
-} from "ComponentsRoot";
+import Field from "../Form/Field";
+import Icon from "../Icon/Icon";
+import MaybeFieldLabel from "../FieldLabel/MaybeFieldLabel";
+import InlineValidation from "../Validation/InlineValidation";
 import theme from "../theme";
 import { subPx } from "../Utils";
 

components/src/Textarea/Textarea.js

@@ -3,7 +3,9 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 import { transparentize } from "polished";
 import { space } from "styled-system";
-import { Field, MaybeFieldLabel, InlineValidation } from "ComponentsRoot";
+import Field from "../Form/Field";
+import MaybeFieldLabel from "../FieldLabel/MaybeFieldLabel";
+import InlineValidation from "../Validation/InlineValidation";
 import theme from "../theme";
 import { subPx } from "../Utils";
 

components/src/Toggle/Toggle.js

@@ -1,9 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
-import {
-  Field, Text, RequirementText, HelpText, Box,
-} from "ComponentsRoot";
+import Box from "../Box/Box";
+import HelpText from "../FieldLabel/HelpText";
+import RequirementText from "../FieldLabel/RequirementText";
+import Field from "../Form/Field";
+import Text from "../Type/Text";
 import theme from "../theme";
 import { ClickInputLabel, omit } from "../Utils";
 import ToggleButton from "./ToggleButton";

components/src/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { Manager, Reference, Popper } from "react-popper";
-import { Box } from "ComponentsRoot";
+import Box from "../Box/Box";
 import theme from "../theme";
 import { withGeneratedId } from "../Utils";