How to use the @emotion/core.withCSSContext function in @emotion/core

// @flow
import * as React from 'react'
import { withCSSContext } from '@emotion/core'
import type { InsertableStyles, CSSContextType } from '@emotion/types'
import { insertStyles, shouldSerializeToReactTree } from '@emotion/utils'

type Props = {
  styles: InsertableStyles | Array
}

const Style = withCSSContext((props: Props, context: CSSContextType) => {
  let rules = ''
  let hash = ''
  if (Array.isArray(props.styles)) {
    props.styles.forEach(style => {
      let renderedStyle = insertStyles(context, style)
      if (renderedStyle !== undefined) {
        // $FlowFixMe
        rules += renderedStyle
        hash += ` ${style.name}`
      }
    })
  } else {
    let renderedStyle = insertStyles(context, props.styles)
    if (renderedStyle !== undefined) {
      rules = renderedStyle
      // $FlowFixMe

import PropTypes from 'prop-types';
import React from 'react';
import Inspector from 'react-inspector';
import { withCSSContext } from '@emotion/core';

import { ActionBar, ActionButton } from '@storybook/components';

import { Actions, Action, Wrapper, InspectorContainer, Countwrap, Counter } from './style';

const ActionLogger = withCSSContext(({ actions, onClear }, { theme }) => (
  
    
      {actions.map(action => (
        
          {action.count > 1 && {action.count}}
          
            
          
        
      ))}

: []
    if (identifierName !== undefined) {
      styles.push(`label:${identifierName};`)
    }
    if (args[0] == null || args[0].raw === undefined) {
      styles.push.apply(styles, args)
    } else {
      styles.push(args[0][0])
      let len = args.length
      let i = 1
      for (; i < len; i++) {
        styles.push(args[i], args[0][i])
      }
    }

    const Styled = withCSSContext((props, context) => {
      let className = ''
      let classInterpolations = []
      let mergedProps = pickAssign(testAlwaysTrue, {}, props, {
        theme: props.theme || context.theme
      })
      if (typeof props.className === 'string') {
        className += getRegisteredStyles(
          context.registered,
          classInterpolations,
          props.className
        )
      }
      const serialized = serializeStyles.call(
        mergedProps,
        context.registered,
        styles.concat(classInterpolations)

}

HeaderDecorator.propTypes = {
  style: PropTypes.shape({
    title: PropTypes.object.isRequired,
    base: PropTypes.object.isRequired,
  }).isRequired,
  node: PropTypes.shape({
    type: PropTypes.oneOf([treeNodeTypes.NAMESPACE, treeNodeTypes.STORY]),
    highlight: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
  }).isRequired,
};

export default {
  ...decorators,
  Header: withCSSContext((props, { theme }) => ),
  Container: withCSSContext((props, { theme }) => ),
  Toggle: withCSSContext((props, { theme }) => ),
};

HeaderDecorator.propTypes = {
  style: PropTypes.shape({
    title: PropTypes.object.isRequired,
    base: PropTypes.object.isRequired,
  }).isRequired,
  node: PropTypes.shape({
    type: PropTypes.oneOf([treeNodeTypes.NAMESPACE, treeNodeTypes.STORY]),
    highlight: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
  }).isRequired,
};

export default {
  ...decorators,
  Header: withCSSContext((props, { theme }) => ),
  Container: withCSSContext((props, { theme }) => ),
  Toggle: withCSSContext((props, { theme }) => ),
};

HeaderDecorator.propTypes = {
  style: PropTypes.shape({
    title: PropTypes.object.isRequired,
    base: PropTypes.object.isRequired,
  }).isRequired,
  node: PropTypes.shape({
    type: PropTypes.oneOf([treeNodeTypes.NAMESPACE, treeNodeTypes.STORY]),
    highlight: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
  }).isRequired,
};

export default {
  ...decorators,
  Header: withCSSContext((props, { theme }) => ),
  Container: withCSSContext((props, { theme }) => ),
  Toggle: withCSSContext((props, { theme }) => ),
};