feat(ui): convert StateItem to styled component

packages/ui/src/atoms/StateItem.js

 import PropTypes from 'prop-types'
+import styled from 'styled-components'
 import React from 'react'
-import classNames from 'classnames'
-import classes from './StateItem.local.scss'
+
+const darkGrey = '#404040'
+const lightGrey = '#b3b3b3'
+
+const disabled = `
+  color: ${lightGrey};
+  cursor: default;
+
+  &:hover {
+    color: ${lightGrey};
+  }
+`
+
+const Root = styled.span`
+  cursor: pointer;
+  font-family: var(--font-interface);
+  font-size: 16px;
+  font-style: italic;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    color: ${darkGrey};
+    transition: 0.25s ease-in-out 0s;
+  }
+
+  ${props => (props.disabled ? disabled : '')};
+`
 
 const StateItem = ({ disabled, name, update, values, index }) => {
   const handleInteraction = () => {
@@ -14,10 +44,7 @@ const StateItem = ({ disabled, name, update, values, index }) => {
   const arrayShift = (array, i) => (i === array.length - 1 ? 0 : i + 1)
 
   return (
-    <span
-      className={classNames(classes.root, {
-        [classes.disabled]: disabled,
-      })}
+    <Root
       disabled={disabled}
       onClick={handleInteraction}
       onKeyPress={handleInteraction}
@@ -25,7 +52,7 @@ const StateItem = ({ disabled, name, update, values, index }) => {
       tabIndex="0"
     >
       {values[index]}
-    </span>
+    </Root>
   )
 }
 

packages/ui/src/atoms/StateItem.local.scss

-$dark-grey: #404040;
-$light-grey: #b3b3b3;
-
-.root {
-  cursor: pointer;
-  font-family: var(--font-interface);
-  font-size: 16px;
-  font-style: italic;
-  padding: 0;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover {
-    color: $dark-grey;
-    transition: 0.25s ease-in-out 0s;
-  }
-}
-
-.disabled {
-  color: $light-grey;
-  cursor: default;
-
-  &:hover {
-    color: $light-grey;
-  }
-}