fix box tag

articles/climate-risk-assessments/components/inline-secondary-code.js

@@ -0,0 +1,11 @@
+import { Box } from 'theme-ui'
+
+const InlineSecondaryCode = ({ children }) => {
+  return (
+    <Box as='span' sx={{ fontFamily: 'mono', letterSpacing: 'mono' }}>
+      {children}
+    </Box>
+  )
+}
+
+export default InlineSecondaryCode

articles/climate-risk-assessments/index.md

@@ -17,6 +17,8 @@ components:
     src: ./components/data-sources.js
   - name: FlowChart
     src: ./components/flow-chart.js
+  - name: InlineSecondaryCode
+    src: ./components/inline-secondary-code.js
 color: yellow
 ---
 
@@ -61,19 +63,16 @@ We synthesized participant feedback and learnings from the workshops into a conc
   <FigureCaption number={1}>
     The process and actors contributing to a climate-related financial risk
     assessment. Toggle between tabs to see the{' '}
-    <Box as='span' sx={{ '& :first-child': { color: 'secondary' } }}>
-      `INFORMATION`
-    </Box>{' '}
-    shared between communities, as well as their main{' '}
-    <Box as='span' sx={{ '& :first-child': { color: 'secondary' } }}>
-      `CONCERNS`
-    </Box>
-    . A solid arrow indicates an “effective” transfer of information that could be
-    confirmed by multiple actors (e.g., one community referenced using information
-    generated by a different community). A dashed arrow indicates that a participant
-    shared information but was unsure of its influence (e.g., in the case of risk
-    assessments influencing regulatory decisions), and a dashed circle denotes that
-    we were unable to confirm details about the kind of information being transferred.
+    <InlineSecondaryCode>INFORMATION</InlineSecondaryCode>
+    shared between communities, as well as their main
+    <InlineSecondaryCode>CONCERNS</InlineSecondaryCode>. A solid arrow indicates
+    an “effective” transfer of information that could be confirmed by multiple
+    actors (e.g., one community referenced using information generated by a
+    different community). A dashed arrow indicates that a participant shared
+    information but was unsure of its influence (e.g., in the case of risk
+    assessments influencing regulatory decisions), and a dashed circle denotes
+    that we were unable to confirm details about the kind of information being
+    transferred.
   </FigureCaption>
 </Figure>
 

components/mdx/page-components.js

@@ -14,6 +14,11 @@ const components = {
         '../../articles/climate-risk-assessments/components/flow-chart.js'
       ).then((mod) => mod.FlowChart || mod.default)
     ),
+    InlineSecondaryCode: dynamic(() =>
+      import(
+        '../../articles/climate-risk-assessments/components/inline-secondary-code.js'
+      ).then((mod) => mod.InlineSecondaryCode || mod.default)
+    ),
   },
   'cdr-verification-explainer': {
     PathwayDiagram: dynamic(() =>