From 460532d984608f23fdf7d7c9dd5bb52ee76ed900 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Fri, 25 Sep 2020 23:12:17 -0400
Subject: [PATCH] chore: refactor colors

---
 .../src/Colors/Alta/AltaColor.stories.tsx     |  2 +-
 .../src/Colors/Alta/AltaColor.tsx             | 26 +++++-----
 .../AntdHorzColor/AntdHorzColor.stories.tsx   |  2 +-
 .../Colors/AntdHorzColor/AntdHorzColor.tsx    | 22 ++++-----
 .../AntdVertColor/AntdVertColor.stories.tsx   |  2 +-
 .../Colors/AntdVertColor/AntdVertColor.tsx    | 22 ++++-----
 .../Colors/AnvilColor/AnvilColor.stories.tsx  |  2 +-
 .../src/Colors/AnvilColor/AnvilColor.tsx      | 26 +++++-----
 .../AtlassianColor/AtlassianColor.stories.tsx |  2 +-
 .../Colors/AtlassianColor/AtlassianColor.tsx  | 48 +++++++++----------
 .../AudiDSColor/AudiDSColor.stories.tsx       |  2 +-
 .../src/Colors/AudiDSColor/AudiDSColor.tsx    | 22 ++++-----
 .../BackpackColor/BackpackColor.stories.tsx   |  2 +-
 .../Colors/BackpackColor/BackpackColor.tsx    | 24 +++++-----
 .../BaseWebColor/BaseWebColor.stories.tsx     |  2 +-
 .../src/Colors/BaseWebColor/BaseWebColor.tsx  | 20 ++++----
 .../BeelineColor/BeelineColor.stories.tsx     |  2 +-
 .../src/Colors/BeelineColor/BeelineColor.tsx  | 22 ++++-----
 .../Colors/BoltColor/BoltColor.stories.tsx    |  2 +-
 .../src/Colors/BoltColor/BoltColor.tsx        | 18 +++----
 .../CanvasColor/CanvasColor.stories.tsx       |  2 +-
 .../src/Colors/CanvasColor/CanvasColor.tsx    | 22 ++++-----
 .../Colors/CedarColor/CedarColor.stories.tsx  |  2 +-
 .../src/Colors/CedarColor/CedarColor.tsx      | 20 ++++----
 .../Colors/CometColor/CometColor.stories.tsx  |  2 +-
 .../src/Colors/CometColor/CometColor.tsx      | 10 ++--
 .../Colors/DuetColor/DuetColor.stories.tsx    |  2 +-
 .../src/Colors/DuetColor/DuetColor.tsx        | 16 +++----
 .../ETradeColor/ETradeColor.stories.tsx       |  2 +-
 .../src/Colors/ETradeColor/ETradeColor.tsx    |  4 +-
 .../FinastraColor/FinastraColor.stories.tsx   |  2 +-
 .../Colors/FinastraColor/FinastraColor.tsx    |  4 +-
 .../FishTankColor/FishTankColor.stories.tsx   |  2 +-
 .../Colors/FishTankColor/FishTankColor.tsx    |  4 +-
 .../Colors/GovUKColor/GovUKColor.stories.tsx  |  2 +-
 .../src/Colors/GovUKColor/GovUKColor.tsx      |  4 +-
 .../FlexContainer/FlexContainer.tsx           |  2 +-
 .../FlexContainer/index.ts                    |  0
 .../GridContainer/GridContainer.tsx           |  2 +-
 .../GridContainer/index.ts                    |  0
 ui/design-tokens/src/components/index.ts      |  2 +
 ui/design-tokens/src/{Colors => }/types.ts    |  0
 42 files changed, 189 insertions(+), 187 deletions(-)
 rename ui/design-tokens/src/{Colors => components}/FlexContainer/FlexContainer.tsx (94%)
 rename ui/design-tokens/src/{Colors => components}/FlexContainer/index.ts (100%)
 rename ui/design-tokens/src/{Colors => components}/GridContainer/GridContainer.tsx (93%)
 rename ui/design-tokens/src/{Colors => components}/GridContainer/index.ts (100%)
 create mode 100644 ui/design-tokens/src/components/index.ts
 rename ui/design-tokens/src/{Colors => }/types.ts (100%)

diff --git a/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx b/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx
index ffad99b92..5c02c0069 100644
--- a/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AltaColor, AltaColorPalette } from './AltaColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AltaColor',
diff --git a/ui/design-tokens/src/Colors/Alta/AltaColor.tsx b/ui/design-tokens/src/Colors/Alta/AltaColor.tsx
index 580b2953f..a3d6fd046 100644
--- a/ui/design-tokens/src/Colors/Alta/AltaColor.tsx
+++ b/ui/design-tokens/src/Colors/Alta/AltaColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Theme } from 'theme-ui';
+import { jsx, Theme } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr } from '../utils';
-import { ColorBlockProps } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block, as well as hex(string) and rgb values.
@@ -14,7 +14,7 @@ export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex, rgba } = colorToStr(colorValue);
   return (
-    <Box
+    <div
       sx={{
         display: 'flex',
         flexDirection: 'row',
@@ -23,7 +23,7 @@ export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
       }}
     >
       <CopyContainer value={hex} name={name}>
-        <Box
+        <div
           sx={{
             bg: colorValue,
             width: 64,
@@ -32,7 +32,7 @@ export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
           }}
         />
       </CopyContainer>
-      <Box
+      <div
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -43,7 +43,7 @@ export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
           py: 1,
         }}
       >
-        <Box
+        <div
           sx={{
             fontWeight: 'bold',
             borderBottom: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
@@ -51,16 +51,16 @@ export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
           }}
         >
           {name || hex}
-        </Box>
-        <Box>HEX: {hex}</Box>
-        <Box>
+        </div>
+        <div>HEX: {hex}</div>
+        <div>
           RGB:{' '}
           {`${rgba.r}, ${rgba.g}, ${rgba.b}${
             rgba.a !== 1 ? `, ${rgba.a}` : ''
           }`}
-        </Box>
-      </Box>
-    </Box>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx
index 7eeaf8ff1..eefd40e1d 100644
--- a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AntdHorzColor, AntdHorzColorPalette } from './AntdHorzColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AntdHorzColor',
diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx
index 2fed2cdc8..f6b9d2eae 100644
--- a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx
+++ b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC, useState, useMemo } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, expanding on hover.
@@ -29,9 +29,9 @@ export const AntdHorzColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
     [isContained],
   );
   return (
-    <Box sx={{ display: 'flex', flex: '1', height: 90, maxWidth: 120 }}>
+    <div sx={{ display: 'flex', flex: '1', height: 90, maxWidth: 120 }}>
       <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
-        <Box
+        <div
           {...onMouseEvents}
           sx={{
             position: 'absolute',
@@ -55,14 +55,14 @@ export const AntdHorzColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
             },
           }}
         >
-          <Box
+          <div
             sx={{
               fontWeight: 'bold',
             }}
           >
             {name || hex}
-          </Box>
-          <Box
+          </div>
+          <div
             sx={{
               pointerEvents: 'none',
               ...(hover || hoverMe ? {} : { visibility: 'hidden', height: 0 }),
@@ -73,10 +73,10 @@ export const AntdHorzColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
                   rgba.a !== 1 ? `, ${rgba.a}` : ''
                 }`
               : hex}
-          </Box>
-        </Box>
+          </div>
+        </div>
       </CopyContainer>
-    </Box>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx
index 4c351742e..b61e0addd 100644
--- a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AntdVertColor, AntdVertColorPalette } from './AntdVertColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AntdVertColor',
diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
index 31565199c..b17da2fed 100644
--- a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
+++ b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC, useState, useMemo } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, expanding on hover.
@@ -29,9 +29,9 @@ export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
   );
 
   return (
-    <Box sx={{ display: 'flex', flex: '1', width: 250 }}>
+    <div sx={{ display: 'flex', flex: '1', width: 250 }}>
       <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
-        <Box
+        <div
           {...onMouseEvents}
           sx={{
             display: 'flex',
@@ -49,15 +49,15 @@ export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
             },
           }}
         >
-          <Box
+          <div
             sx={{
               fontWeight: 'bold',
               mr: 4,
             }}
           >
             {name || hex}
-          </Box>
-          <Box
+          </div>
+          <div
             className="item-text"
             sx={{
               pointerEvents: 'none',
@@ -69,10 +69,10 @@ export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
                   rgba.a !== 1 ? `, ${rgba.a}` : ''
                 }`
               : hex}
-          </Box>
-        </Box>
+          </div>
+        </div>
       </CopyContainer>
-    </Box>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx
index 3031a0f9f..afe9aa9a1 100644
--- a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AnvilColor, AnvilColorPalette } from './AnvilColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AnvilColor',
diff --git a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx
index 617fc7bae..427984c95 100644
--- a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx
+++ b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Heading } from 'theme-ui';
+import { jsx, Heading } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block with a title, as well as hex(string) and rgb values.
@@ -15,7 +15,7 @@ export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
   const { hex } = colorToStr(colorValue);
   const textColor = mostReadable(hex);
   return (
-    <Box
+    <div
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -24,14 +24,14 @@ export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
       }}
     >
       <CopyContainer value={hex} name={name}>
-        <Box
+        <div
           sx={{
             position: 'relative',
             bg: colorValue,
             height: 90,
           }}
         >
-          <Box
+          <div
             sx={{
               position: 'absolute',
               bottom: 10,
@@ -41,10 +41,10 @@ export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
               borderRadius: '50%',
               bg: textColor,
             }}
-          ></Box>
-        </Box>
+          />
+        </div>
       </CopyContainer>
-      <Box
+      <div
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -61,11 +61,11 @@ export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
         >
           {name || hex}
         </Heading>
-        <Box sx={{ fontSize: 1 }}>{`${
+        <div sx={{ fontSize: 1 }}>{`${
           typeof color !== 'string' ? color.name : 'HEX:'
-        } ${hex}`}</Box>
-      </Box>
-    </Box>
+        } ${hex}`}</div>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx
index 7e484e2a9..f20ee4583 100644
--- a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AtlassianColor, AtlassianColorPalette } from './AtlassianColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AtlassianColor',
diff --git a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.tsx b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.tsx
index 64fe6f002..9da26e9bd 100644
--- a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.tsx
+++ b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.tsx
@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import tinycolor from 'tinycolor2';
 import { colorToStr } from '../utils';
-import { ColorBlockProps } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 const ContrastTest: FC<{
   bg: string;
@@ -17,7 +17,7 @@ const ContrastTest: FC<{
     size,
   }); //false
   return (
-    <Box
+    <div
       sx={{
         p: 2,
         display: 'flex',
@@ -39,7 +39,7 @@ const ContrastTest: FC<{
       >
         {pass ? 'PASS' : 'FAIL'}
       </span>
-    </Box>
+    </div>
   );
 };
 /**
@@ -50,7 +50,7 @@ export const AtlassianColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
   const { hex, rgba } = colorToStr(colorValue);
   return (
-    <Box
+    <div
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -59,14 +59,14 @@ export const AtlassianColor: FC<ColorBlockProps> = ({ name, color }) => {
       }}
     >
       <CopyContainer value={hex} name={name}>
-        <Box
+        <div
           sx={{
             bg: colorValue,
             height: 90,
             position: 'relative',
           }}
         >
-          <Box
+          <div
             sx={{
               position: 'absolute',
               left: 10,
@@ -82,10 +82,10 @@ export const AtlassianColor: FC<ColorBlockProps> = ({ name, color }) => {
             <ContrastTest bg={colorValue} color="#000" size="small" />
             <ContrastTest bg={colorValue} color="#fff" size="large" />
             <ContrastTest bg={colorValue} color="#fff" size="small" />
-          </Box>
-        </Box>
+          </div>
+        </div>
       </CopyContainer>
-      <Box
+      <div
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -95,38 +95,38 @@ export const AtlassianColor: FC<ColorBlockProps> = ({ name, color }) => {
           fontSize: 1,
         }}
       >
-        <Box
+        <div
           sx={{
             display: 'flex',
             flexDirection: 'column',
           }}
         >
-          <Box>NAME</Box>
-          <Box sx={{ pt: 1, pb: 3 }}>
+          <div>NAME</div>
+          <div sx={{ pt: 1, pb: 3 }}>
             {`${typeof color !== 'string' ? `${color.name} - ` : ''} ${name ||
               hex}`}
-          </Box>
-        </Box>
-        <Box
+          </div>
+        </div>
+        <div
           sx={{
             display: 'flex',
             flexDirection: 'row',
             justifyContent: 'space-between',
           }}
         >
-          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          <div sx={{ display: 'flex', flexDirection: 'column' }}>
             <div>HEX</div>
             <div>{hex}</div>
-          </Box>
-          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+          </div>
+          <div sx={{ display: 'flex', flexDirection: 'column' }}>
             <div>RGB</div>
             <div>{`${rgba.r}, ${rgba.g}, ${rgba.b}${
               rgba.a !== 1 ? `, ${rgba.a}` : ''
             }`}</div>
-          </Box>
-        </Box>
-      </Box>
-    </Box>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx
index 3911fa023..9beeb0a51 100644
--- a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AudiDSColor, AudiDSColorPalette } from './AudiDSColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/AudiDSColor',
diff --git a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx
index 4ed6a4066..08637b4bc 100644
--- a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx
+++ b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx
@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import simpleColorConverter from 'simple-color-converter';
 import { colorToStr } from '../utils';
-import { ColorBlockProps } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block and color aliases for various standard is Pantone, CMYK.
@@ -27,7 +27,7 @@ export const AudiDSColor: FC<ColorBlockProps> = ({ name, color }) => {
     to: 'pantone',
   });
   return (
-    <Box
+    <div
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -36,7 +36,7 @@ export const AudiDSColor: FC<ColorBlockProps> = ({ name, color }) => {
       }}
     >
       <CopyContainer value={hex} name={name}>
-        <Box
+        <div
           sx={{
             bg: colorValue,
             ':after': {
@@ -47,7 +47,7 @@ export const AudiDSColor: FC<ColorBlockProps> = ({ name, color }) => {
           }}
         />
       </CopyContainer>
-      <Box
+      <div
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -57,14 +57,14 @@ export const AudiDSColor: FC<ColorBlockProps> = ({ name, color }) => {
           fontSize: 2,
         }}
       >
-        <Box
+        <div
           sx={{
             display: 'flex',
             flexDirection: 'column',
           }}
         >
-          <Box sx={{ pt: 1, pb: 2, fontWeight: 'bold' }}>{name || hex}</Box>
-        </Box>
+          <div sx={{ pt: 1, pb: 2, fontWeight: 'bold' }}>{name || hex}</div>
+        </div>
         <div sx={{ lineHeight: 1.5 }}>
           <div>
             {`RGB: ${rgba.r}/${rgba.g}/${rgba.b}${
@@ -76,8 +76,8 @@ export const AudiDSColor: FC<ColorBlockProps> = ({ name, color }) => {
           <div sx={{ mb: 1 }}>{`${pantone ? `Pantone ${pantone}` : '--'}`}</div>
           <div>{`RAL: ${ral.ral}`}</div>
         </div>
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx
index a80b076ba..527a085a4 100644
--- a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BackpackColor, BackpackColorPalette } from './BackpackColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/BackpackColor',
diff --git a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx
index 1c6fe4afb..9aa410d09 100644
--- a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx
+++ b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx
@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import simpleColorConverter from 'simple-color-converter';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block and color aliases for various standard is Pantone, CMYK.
@@ -30,7 +30,7 @@ export const BackpackColor: FC<ColorBlockProps> = ({ name, color }) => {
     to: 'pantone',
   });
   return (
-    <Box
+    <div
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -39,7 +39,7 @@ export const BackpackColor: FC<ColorBlockProps> = ({ name, color }) => {
       }}
     >
       <CopyContainer value={hex} name={name}>
-        <Box
+        <div
           sx={{
             color: textColor,
             bg: colorValue,
@@ -51,7 +51,7 @@ export const BackpackColor: FC<ColorBlockProps> = ({ name, color }) => {
             },
           }}
         >
-          <Box
+          <div
             sx={{
               display: 'flex',
               flexDirection: 'column',
@@ -65,7 +65,7 @@ export const BackpackColor: FC<ColorBlockProps> = ({ name, color }) => {
             }}
           >
             {typeof darkValue !== 'undefined' && (
-              <Box
+              <div
                 sx={{
                   position: 'absolute',
                   bottom: 0,
@@ -76,9 +76,9 @@ export const BackpackColor: FC<ColorBlockProps> = ({ name, color }) => {
                 }}
               />
             )}
-            <Box sx={{ pt: 1, pb: 2, fontWeight: 'bold' }}>{`${name || hex} ${
+            <div sx={{ pt: 1, pb: 2, fontWeight: 'bold' }}>{`${name || hex} ${
               typeof darkName !== 'string' ? colorName : ''
-            }`}</Box>
+            }`}</div>
             <div
               sx={{
                 lineHeight: 1.5,
@@ -104,10 +104,10 @@ export const BackpackColor: FC<ColorBlockProps> = ({ name, color }) => {
                 </div>
               )}
             </div>
-          </Box>
-        </Box>
+          </div>
+        </div>
       </CopyContainer>
-    </Box>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx
index d1b2453bb..475dc02f1 100644
--- a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BaseWebColor, BaseWebColorPalette } from './BaseWebColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/BaseWebColor',
diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
index 363e272e1..6696cdd16 100644
--- a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
+++ b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name and hex value
@@ -16,8 +16,8 @@ export const BaseWebColor: FC<ColorBlockProps> = ({ name, color }) => {
   const { hex } = colorToStr(colorValue);
   const textColor = mostReadable(hex);
   return (
-    <Box sx={{ display: 'flex', flex: '1' }}>
-      <Box
+    <div sx={{ display: 'flex', flex: '1' }}>
+      <div
         sx={{
           width: '100%',
           display: 'flex',
@@ -30,7 +30,7 @@ export const BaseWebColor: FC<ColorBlockProps> = ({ name, color }) => {
         }}
       >
         <CopyContainer value={hex} name={name}>
-          <Box
+          <div
             sx={{
               width: 100,
               height: 50,
@@ -40,16 +40,16 @@ export const BaseWebColor: FC<ColorBlockProps> = ({ name, color }) => {
             }}
           />
         </CopyContainer>
-        <Box
+        <div
           sx={{
             flex: 1,
           }}
         >
           {name}
-        </Box>
+        </div>
         <div sx={{ mr: 3 }}>{hex.toUpperCase()}</div>
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx
index 561c89294..4094d11ce 100644
--- a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BeelineColor, BeelineColorPalette } from './BeelineColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/BeelineColor',
diff --git a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx
index f4c7db8aa..cda1dd498 100644
--- a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx
+++ b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx
@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Theme } from 'theme-ui';
+import { jsx, Theme } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import simpleColorConverter from 'simple-color-converter';
 import { colorToStr } from '../utils';
-import { ColorBlockProps } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block with values for rgb and Pantone colors.
@@ -19,7 +19,7 @@ export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
     to: 'pantone',
   });
   return (
-    <Box
+    <div
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -32,7 +32,7 @@ export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
       }}
     >
       <CopyContainer value={hex} name={name} sxStyle={{ px: 2, pt: 2 }}>
-        <Box
+        <div
           sx={{
             bg: colorValue,
             ':after': {
@@ -43,7 +43,7 @@ export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
           }}
         />
       </CopyContainer>
-      <Box
+      <div
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -51,14 +51,14 @@ export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
           fontSize: 2,
         }}
       >
-        <Box
+        <div
           sx={{
             display: 'flex',
             flexDirection: 'column',
           }}
         >
-          <Box sx={{ pb: 2, fontSize: 3 }}>{name || hex}</Box>
-        </Box>
+          <div sx={{ pb: 2, fontSize: 3 }}>{name || hex}</div>
+        </div>
         <div sx={{ fontSize: 0 }}>
           <div
             sx={{
@@ -96,8 +96,8 @@ export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
             <div>{pantone || '--'}:</div>
           </div>
         </div>
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx b/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx
index 4f9b6c41c..f77179cf9 100644
--- a/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoltColor, BoltColorPalette } from './BoltColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/BoltColor',
diff --git a/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx b/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx
index 078d257f7..7218a1d73 100644
--- a/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx
+++ b/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx
@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import tinycolor from 'tinycolor2';
 import { CheckCircleFillIcon, XCircleFillIcon } from '@primer/octicons-react';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue, colorContrast } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps, ColorValue, colorContrast } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 const PassFail: FC<{ status: 'pass' | 'fail' }> = ({ status }) => (
   <div
@@ -60,7 +60,7 @@ export const BoltColor: FC<ColorBlockProps> = ({ name, color }) => {
   const { hex } = colorToStr(colorValue);
   const textColor = mostReadable(hex);
   return (
-    <Box
+    <div
       sx={{
         display: 'flex',
         flexDirection: 'column',
@@ -68,7 +68,7 @@ export const BoltColor: FC<ColorBlockProps> = ({ name, color }) => {
       }}
     >
       <CopyContainer value={hex} name={name}>
-        <Box
+        <div
           sx={{
             bg: colorValue,
             borderRadius: '.75em',
@@ -93,7 +93,7 @@ export const BoltColor: FC<ColorBlockProps> = ({ name, color }) => {
             <div>{name}</div>
             <div>{hex}</div>
           </div>
-          <Box
+          <div
             sx={{
               position: 'absolute',
               left: 10,
@@ -145,10 +145,10 @@ export const BoltColor: FC<ColorBlockProps> = ({ name, color }) => {
                 <ContrastTest bg={colorValue} color="#000" />
               </tbody>
             </table>
-          </Box>
-        </Box>
+          </div>
+        </div>
       </CopyContainer>
-    </Box>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx
index 8237ed5d8..15f11c92a 100644
--- a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CanvasColor, CanvasColorPalette } from './CanvasColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/CanvasColor',
diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
index d81952a65..75612bb87 100644
--- a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
+++ b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Theme } from 'theme-ui';
+import { jsx, Theme } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name, sass variable name and hex value
@@ -19,8 +19,8 @@ export const CanvasColor: FC<ColorBlockProps> = ({ name, color }) => {
   const { hex } = colorToStr(colorValue);
   const textColor = mostReadable(hex);
   return (
-    <Box sx={{ display: 'flex', flex: '1', mb: 2 }}>
-      <Box
+    <div sx={{ display: 'flex', flex: '1', mb: 2 }}>
+      <div
         sx={{
           width: '100%',
           display: 'flex',
@@ -36,7 +36,7 @@ export const CanvasColor: FC<ColorBlockProps> = ({ name, color }) => {
           name={name}
           sxStyle={{ width: '40%', height: '100%' }}
         >
-          <Box
+          <div
             sx={{
               width: '100%',
               height: '100%',
@@ -47,9 +47,9 @@ export const CanvasColor: FC<ColorBlockProps> = ({ name, color }) => {
             }}
           >
             {name}
-          </Box>
+          </div>
         </CopyContainer>
-        <Box
+        <div
           sx={{
             flex: 1,
           }}
@@ -76,9 +76,9 @@ export const CanvasColor: FC<ColorBlockProps> = ({ name, color }) => {
             </div>
             <div sx={{ fontSize: 0 }}>{sass}</div>
           </div>
-        </Box>
-      </Box>
-    </Box>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx b/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx
index 47f029d1d..7f493e9d6 100644
--- a/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CedarColor, CedarColorPalette } from './CedarColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/CedarColor',
diff --git a/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx b/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx
index 928393139..6f241a97a 100644
--- a/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx
+++ b/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box } from 'theme-ui';
+import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name, description and hex value
@@ -23,8 +23,8 @@ export const CedarColor: FC<ColorBlockProps & { index?: number }> = ({
   const { hex } = colorToStr(colorValue);
   const textColor = mostReadable(hex);
   return (
-    <Box sx={{ display: 'flex', flex: '1' }}>
-      <Box
+    <div sx={{ display: 'flex', flex: '1' }}>
+      <div
         sx={{
           width: '100%',
           display: 'flex',
@@ -36,7 +36,7 @@ export const CedarColor: FC<ColorBlockProps & { index?: number }> = ({
         }}
       >
         <CopyContainer value={hex} name={name}>
-          <Box
+          <div
             sx={{
               width: 50,
               height: 50,
@@ -46,7 +46,7 @@ export const CedarColor: FC<ColorBlockProps & { index?: number }> = ({
             }}
           />
         </CopyContainer>
-        <Box
+        <div
           sx={{
             flex: 1,
           }}
@@ -55,10 +55,10 @@ export const CedarColor: FC<ColorBlockProps & { index?: number }> = ({
             <div sx={{ fontWeight: 'bold' }}>{colorName}</div>
             <div> {description}</div>
           </div>
-        </Box>
+        </div>
         <div sx={{ mr: 3, fontSize: 0 }}>{hex}</div>
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx b/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx
index d802c8446..3afea366d 100644
--- a/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CometColor, CometColorPalette } from './CometColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/CometColor',
diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.tsx b/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
index 2772d8a76..738084224 100644
--- a/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
+++ b/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, SxStyleProp } from 'theme-ui';
+import { jsx, SxStyleProp } from 'theme-ui';
 import tinycolor from 'tinycolor2';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue, colorContrast } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps, ColorValue, colorContrast } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name sass variable name and AA/AAA tests
@@ -41,7 +41,7 @@ export const CometColor: FC<ColorBlockProps> = ({ name, color }) => {
     );
   }
   return (
-    <Box sx={{ display: 'flex', flex: '1' }}>
+    <div sx={{ display: 'flex', flex: '1' }}>
       <CopyContainer value={hex} name={name} sxStyle={{ width: '100%' }}>
         <div
           sx={{
@@ -79,7 +79,7 @@ export const CometColor: FC<ColorBlockProps> = ({ name, color }) => {
           </div>
         </div>
       </CopyContainer>
-    </Box>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx b/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx
index 1b43a2515..622bea9f5 100644
--- a/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { DuetColor, DuetColorPalette } from './DuetColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/DuetColor',
diff --git a/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx b/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx
index a608514ef..916f3871f 100644
--- a/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx
+++ b/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, ReactNode, Fragment, useState } from 'react';
-import { jsx, Box, Theme } from 'theme-ui';
+import { jsx, Theme } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import tinycolor from 'tinycolor2';
 import {
@@ -16,8 +16,8 @@ import {
   ColorValue,
   colorContrast,
   TokenStatus,
-} from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+} from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name, description, var and sas variables and contrast ratio.
@@ -51,8 +51,8 @@ export const DuetColor: FC<ColorBlockProps> = ({ name, color }) => {
   const { hex, rgba } = colorToStr(colorValue);
   const contrast = tinycolor.readability(hex, '#ffffff');
   return (
-    <Box sx={{ display: 'flex', flex: '1' }}>
-      <Box
+    <div sx={{ display: 'flex', flex: '1' }}>
+      <div
         onMouseOver={() => setHover(true)}
         onMouseOut={() => setHover(false)}
         sx={{
@@ -68,7 +68,7 @@ export const DuetColor: FC<ColorBlockProps> = ({ name, color }) => {
           sx={{ width: '25%', display: 'flex', flexDirection: 'column', px: 1 }}
         >
           <CopyContainer value={hex} name={colorName}>
-            <Box
+            <div
               sx={{
                 height: 50,
                 bg: colorValue,
@@ -104,8 +104,8 @@ export const DuetColor: FC<ColorBlockProps> = ({ name, color }) => {
         <div sx={{ width: '7%', textAlign: 'center' }}>
           {statusNode(status)}
         </div>
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 };
 
diff --git a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.stories.tsx b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.stories.tsx
index bc60c1bf6..2642c54ab 100644
--- a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ETradeColor, ETradeColorPalette } from './ETradeColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/ETradeColor',
diff --git a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx
index ef14926b6..ede3004cb 100644
--- a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx
+++ b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx
@@ -5,8 +5,8 @@ import tinycolor from 'tinycolor2';
 import { CircleSlashIcon } from '@primer/octicons-react';
 import copy from 'copy-to-clipboard';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue, colorContrast } from '../types';
-import { GridContainerProps, GridContainer } from '../GridContainer';
+import { ColorBlockProps, ColorValue, colorContrast } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
 
 const CopyItem: FC<{ name: string; value?: string }> = ({ name, value }) => {
   const [hover, setHover] = useState(false);
diff --git a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.stories.tsx b/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.stories.tsx
index 8b621e2b3..3cb98b651 100644
--- a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FinastraColor, FinastraColorPalette } from './FinastraColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/FinastraColor',
diff --git a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx b/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx
index 30be30712..0eeff4415 100644
--- a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx
+++ b/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx
@@ -4,8 +4,8 @@ import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { CheckIcon } from '@primer/octicons-react';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, with name and hex color on the side. If the color is a primary color, will display as a circle.
diff --git a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx
index 77c1200b8..71eb7480c 100644
--- a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FishTankColor, FishTankColorPalette } from './FishTankColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/FishTankColor',
diff --git a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
index 9209f11ca..40ee9f7b8 100644
--- a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
+++ b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
@@ -3,8 +3,8 @@ import { FC } from 'react';
 import { jsx, Theme } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr, mostReadable } from '../utils';
-import { ColorBlockProps, ColorValue } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a row with the sass var name and hex color.
diff --git a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx
index 88dbb8d66..619e0cbaf 100644
--- a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { GovUKColor, GovUKColorPalette } from './GovUKColor';
-import { ColorProps } from '../types';
+import { ColorProps } from '../../types';
 
 export default {
   title: 'Design Tokens/Colors/GovUKColor',
diff --git a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx
index 8376606a2..b2d0e0881 100644
--- a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx
+++ b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx
@@ -3,8 +3,8 @@ import { FC } from 'react';
 import { jsx } from 'theme-ui';
 import { CopyContainer } from '@component-controls/components';
 import { colorToStr } from '../utils';
-import { ColorBlockProps, ColorValue } from '../types';
-import { FlexContainerProps, FlexContainer } from '../FlexContainer';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a row with a color circle and the sass var name and hex color.
diff --git a/ui/design-tokens/src/Colors/FlexContainer/FlexContainer.tsx b/ui/design-tokens/src/components/FlexContainer/FlexContainer.tsx
similarity index 94%
rename from ui/design-tokens/src/Colors/FlexContainer/FlexContainer.tsx
rename to ui/design-tokens/src/components/FlexContainer/FlexContainer.tsx
index 76e61ea22..6ab074fc9 100644
--- a/ui/design-tokens/src/Colors/FlexContainer/FlexContainer.tsx
+++ b/ui/design-tokens/src/components/FlexContainer/FlexContainer.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { FC, useState } from 'react';
 import { jsx, Box, BoxProps } from 'theme-ui';
-import { ContainerProps } from '../types';
+import { ContainerProps } from '../../types';
 
 export type FlexContainerProps = {
   direction: 'row' | 'column';
diff --git a/ui/design-tokens/src/Colors/FlexContainer/index.ts b/ui/design-tokens/src/components/FlexContainer/index.ts
similarity index 100%
rename from ui/design-tokens/src/Colors/FlexContainer/index.ts
rename to ui/design-tokens/src/components/FlexContainer/index.ts
diff --git a/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx b/ui/design-tokens/src/components/GridContainer/GridContainer.tsx
similarity index 93%
rename from ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx
rename to ui/design-tokens/src/components/GridContainer/GridContainer.tsx
index c65a2b5b2..4e82a0a48 100644
--- a/ui/design-tokens/src/Colors/GridContainer/GridContainer.tsx
+++ b/ui/design-tokens/src/components/GridContainer/GridContainer.tsx
@@ -1,6 +1,6 @@
 import React, { FC, RefObject, useState } from 'react';
 import { Grid, GridProps } from 'theme-ui';
-import { ContainerProps } from '../types';
+import { ContainerProps } from '../../types';
 
 export type GridContainerProps = ContainerProps & Omit<GridProps, 'children'>;
 
diff --git a/ui/design-tokens/src/Colors/GridContainer/index.ts b/ui/design-tokens/src/components/GridContainer/index.ts
similarity index 100%
rename from ui/design-tokens/src/Colors/GridContainer/index.ts
rename to ui/design-tokens/src/components/GridContainer/index.ts
diff --git a/ui/design-tokens/src/components/index.ts b/ui/design-tokens/src/components/index.ts
new file mode 100644
index 000000000..a31719aa1
--- /dev/null
+++ b/ui/design-tokens/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './FlexContainer';
+export * from './GridContainer';
diff --git a/ui/design-tokens/src/Colors/types.ts b/ui/design-tokens/src/types.ts
similarity index 100%
rename from ui/design-tokens/src/Colors/types.ts
rename to ui/design-tokens/src/types.ts