diff --git a/examples/with-filbert/.babelrc b/examples/with-filbert/.babelrc
new file mode 100644
index 0000000000000..9cc7017fb9b6c
--- /dev/null
+++ b/examples/with-filbert/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["next/babel"],
+ "plugins": ["macros"]
+ }
\ No newline at end of file
diff --git a/examples/with-filbert/package.json b/examples/with-filbert/package.json
index b13949c0159cd..6acc42079e3a2 100644
--- a/examples/with-filbert/package.json
+++ b/examples/with-filbert/package.json
@@ -12,8 +12,9 @@
"author": "Kuldeep Keshwar",
"license": "ISC",
"dependencies": {
- "@filbert-js/core": "^0.0.4",
- "@filbert-js/server-stylesheet": "^0.0.4",
+ "@filbert-js/core": "latest",
+ "@filbert-js/macro": "latest",
+ "@filbert-js/server-stylesheet": "latest",
"next": "latest",
"react": "^16.7.0",
"react-dom": "^16.7.0"
diff --git a/examples/with-filbert/pages/index.js b/examples/with-filbert/pages/index.js
index aeabe9d3b618b..fb4f6eaea4901 100644
--- a/examples/with-filbert/pages/index.js
+++ b/examples/with-filbert/pages/index.js
@@ -1,11 +1,8 @@
-import { Global, styled } from '@filbert-js/core'
+import { Global, css, styled } from '@filbert-js/macro'
import React from 'react'
-const Text = styled('div')`
- color: hotpink;
-`
-const Heading = styled('h1')`
+const Heading = styled.h1`
outline: none;
text-decoration: none;
font-weight: 300;
@@ -14,7 +11,6 @@ const Heading = styled('h1')`
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.01);
padding: 0.4125em 1.25em;
color: #3793e0;
-
&:hover {
border-bottom-color: #4682b4;
border-bottom: 1px solid;
@@ -24,10 +20,10 @@ const Heading = styled('h1')`
text-decoration: none;
}
`
-const Small = styled('div')`
+const Small = styled.div`
color: black;
`
-const Container = styled('div')`
+const Container = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
@@ -57,7 +53,11 @@ export default function Home() {
`}
/>
-
+