chore: added Zara as reviewer

.github/CODEOWNERS

@@ -1,3 +1,3 @@
-* @JakeLane @pancaspe87 @liamqma @dddlr
+* @JakeLane @pancaspe87 @liamqma @dddlr @zesmith2
 **/package.json
 yarn.lock

stories/binary-expression.tsx

@@ -65,11 +65,34 @@ export const OrderOfOperations = (): JSX.Element => {
   return <Component>Order of operations - padding: 5 * (spacing + 2)</Component>;
 };
 
+const RightArrow = styled.div({
+  width: '30px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '1.5em',
+  '&::before': {
+    content: '→',
+  },
+});
+
 export const CalcUtility = (): JSX.Element => {
-  const Component = styled.div`
-    ${commonStyles};
-    width: calc(100% - ${spacing * 2}px);
-  `;
+  const Component = styled.div({
+    color: 'white',
+    position: 'relative',
+    counterIncrement: 'step',
+    width: '100%',
+    '&::before': {
+      // content: 'wtf',
+      content: 'counter(step)',
+      backgroundColor: 'red',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    },
+  });
 
   return <Component>calc() utility - width: calc(100% - spacing * 2)</Component>;
 };
@@ -78,7 +101,7 @@ export const NonStaticValues = (): JSX.Element => {
   const random = Math.random;
   const Component = styled.div`
     ${commonStyles};
-    /* 
+    /*
       Using these properties so randomness does not cause
       visual difference for tests
     */