chore: resolves code review comments

examples/with-compiled-css/.babelrc

@@ -1,4 +1,3 @@
 {
-  "presets": ["@babel/preset-react"],
-  "plugins": ["@babel/plugin-syntax-jsx"]
+  "presets": ["next/babel"]
 }

examples/with-compiled-css/pages/class-names-box.js → examples/with-compiled-css/components/class-names-box.js

@@ -1,4 +1,5 @@
 import { ClassNames } from '@compiled/react'
+import { error } from '../style/colors'
 
 export const BoxStyles = ({ children }) => (
   <ClassNames>
@@ -8,7 +9,7 @@ export const BoxStyles = ({ children }) => (
           display: flex;
           width: 100px;
           height: 100px;
-          border: 1px solid red;
+          border: 1px solid ${error};
           padding: 8px;
           flex-direction: column;
         `,

examples/with-compiled-css/pages/styled-button.js → examples/with-compiled-css/components/styled-button.js

@@ -2,7 +2,6 @@ import { styled } from '@compiled/react'
 
 export const Button = styled.button`
   color: ${(props) => props.color};
-  border: 1px solid black;
   background-color: transparent;
   padding: 6px 8px;
   border-radius: 3px;

examples/with-compiled-css/pages/index.js

@@ -1,7 +1,7 @@
 import '@compiled/react'
-import { BoxStyles } from './class-names-box'
-import { Button } from './styled-button'
-import { secondary, primary } from './colors'
+import { BoxStyles } from '../components/class-names-box'
+import { Button } from '../components/styled-button'
+import { secondary, primary } from '../style/colors'
 
 const IndexPage = () => (
   <BoxStyles>