@t2ca/gatsby-theme-showcase 1.0.105 → 1.0.107

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.105",
+  "version": "1.0.107",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {

package/src/components/card.js

@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import React from "react"
-import { jsx, Styled } from "theme-ui"
+import { jsx, Themed } from "theme-ui"
 import Button from "./button"
 
 export default (props) => (
-  <Styled.li>
+  <Themed.li>
     <span
       sx={{
         svg: {
@@ -21,5 +21,5 @@ export default (props) => (
     {props.button ? (
       <Button type={props.buttonType}>{props.button}</Button>
     ) : null}
-  </Styled.li>
+  </Themed.li>
 )

package/src/components/hero.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from "react"
-import { jsx, Styled, Container, Flex } from "theme-ui"
+import { jsx, Themed, Container, Flex } from "theme-ui"
 import { motion } from "framer-motion"
 
 export default ({
@@ -47,15 +47,15 @@ export default ({
                   // flex: `1 0 0`,
                 }}
               >
-                <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
+                <Themed.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
                   {headingTop}
-                </Styled.h1>
-                <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
+                </Themed.h1>
+                <Themed.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
                   {headingMiddle}
-                </Styled.h1>
-                <Styled.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
+                </Themed.h1>
+                <Themed.h1 sx={{ fontSize: [6, 7], fontWeight: `extrabold` }}>
                   {headingBottom}
-                </Styled.h1>
+                </Themed.h1>
               </Flex>
               <Flex
                 sx={{
@@ -74,14 +74,14 @@ export default ({
               </Flex>
             </Flex>
             <div sx={{ width: [`5/6`, `2/3`] }}>
-              <Styled.p
+              <Themed.p
                 sx={{ fontSize: [1, 2], py: 4, lineHeight: 2.5, color: color }}
               >
                 Partnering with us is a journey and not just a single
                 transaction. While working together we will help you navigate
                 the dynamic digital landscape and help you get ahead of your
                 competitors.
-              </Styled.p>
+              </Themed.p>
             </div>
           </motion.div>
         </Container>

package/src/components/layout.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { useState } from "react"
-import { jsx, Styled, Alert } from "theme-ui"
-import { Global } from "@emotion/core"
+import { jsx, Themed, Alert } from "theme-ui"
+import { Global } from "@emotion/react"
 import { Helmet } from "react-helmet"
 
 import MobileNavigation from "./navigation-mobile"
@@ -13,7 +13,7 @@ const Layout = ({ header, main, children, banner }) => {
   const [menuOpen, setMenuOpen] = useState(false)
 
   return (
-    <Styled.root>
+    <Themed.root>
       <Global
         styles={{
           html: {
@@ -44,7 +44,7 @@ const Layout = ({ header, main, children, banner }) => {
       </div>
 
       <MobileNavigation />
-    </Styled.root>
+    </Themed.root>
   )
 }
 

package/src/components/project-list.js

@@ -1,19 +1,19 @@
 import React from "react"
 import { Link } from "gatsby"
-import { Styled, Container } from "theme-ui"
+import { Themed, Container } from "theme-ui"
 
 const ProjectList = ({ projects }) => (
   <Container>
-    <Styled.h1>Projects</Styled.h1>
-    <Styled.ul>
-      {projects.map(project => (
-        <Styled.li key={project.id}>
-          <Styled.a as={Link} to={project.slug}>
+    <Themed.h1>Projects</Themed.h1>
+    <Themed.ul>
+      {projects.map((project) => (
+        <Themed.li key={project.id}>
+          <Themed.a as={Link} to={project.slug}>
             {project.title}
-          </Styled.a>
-        </Styled.li>
+          </Themed.a>
+        </Themed.li>
       ))}
-    </Styled.ul>
+    </Themed.ul>
   </Container>
 )
 

package/src/components/project.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from "react"
-import { Styled, jsx, Container } from "theme-ui"
+import { Themed, jsx, Container } from "theme-ui"
 import { Link } from "gatsby"
 import Img from "gatsby-image"
 
@@ -26,11 +26,11 @@ const Project = (data) => {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
           >
-            <Styled.a as={Link} to="/projects/">
+            <Themed.a as={Link} to="/projects/">
               <FaArrowLeft size={12} sx={{ marginRight: ".25rem" }} />
               Back to showcase
-            </Styled.a>
-            <Styled.h1>{data.title}</Styled.h1>
+            </Themed.a>
+            <Themed.h1>{data.title}</Themed.h1>
           </motion.div>
 
           <motion.div