How to use the react-fela.withTheme function in react-fela

ReactModal2.getApplicationElement = () => document.getElementById('app');

// isOpen={isOpen} transitionSpeed={1000} on={ReactModal}
const ReactModal = ({ className, ...props }) => (
  
);

const getLogo = x => {
  if (typeof x === 'function') {
    return x();
  }
  return <img alt="logo" src="{x}">;
};

export const Modal = withTheme(
  ({
    isOpen,
    showLogo,
    leftButtons,
    rightButtons,
    className,
    subtitle,
    onClose,
    onCancel,
    okText,
    cancelText,
    onOk,
    title,
    loading,
    theme,
    noPortal,

ReactModal2.getApplicationElement = () => document.getElementById('app');

// isOpen={isOpen} transitionSpeed={1000} on={ReactModal}
const ReactModal = ({ className, ...props }) => (
  
);

const getLogo = x => {
  if (typeof x === 'function') {
    return x();
  }
  return <img alt="logo" src="{x}">;
};

const Modal = withTheme(
  ({
    isOpen,
    showLogo,
    leftButtons,
    rightButtons,
    className,
    subtitle,
    onClose,
    onCancel,
    okText,
    cancelText,
    onOk,
    title,
    loading,
    theme,
    noPortal,

describe('components withTheme', () => {
    const DivWithTheme = ({ theme }) =&gt; <div>{theme.color.grass}</div>
    DivWithTheme.propTypes = {
      theme: PropTypes.object,
    }

    const WithThemeDiv = withTheme(DivWithTheme)
    it('should capture snapshot', () =&gt; {
      const { wrapper, snapshot } = felaShallow(, {}, rootTheme)
      expect(snapshot(wrapper)).toMatchSnapshot()
    })
  })

const applyTheme = (ComponentToWrap, ...themes) => {
  const ThemedComponent = props => (
    
      
    
  )

  ThemedComponent._isFelaComponent = true
  ThemedComponent.defaultProps = {
    theme: {},
  }
  ThemedComponent.propTypes = {
    theme: PropTypes.object,
  }

  const WithThemeHOC = withTheme(ThemedComponent)
  return WithThemeHOC
}

import React from 'react';
import { createComponent, withTheme } from 'react-fela';
import tinycolor from 'tinycolor2';

const getLogo = x => {
  if (typeof x === 'function') {
    return x();
  }
  return <img alt="logo" src="{x}">;
};
const Modal = withTheme(
  ({ className, theme, show = true }) =&gt;
    show ? (
      <div>
        {theme.logoWhite &amp;&amp; (
          <div>{getLogo(theme.logoWhite)}</div>
        )}
      </div>
    ) : null,
);

const component = createComponent(
  ({ theme, bottomTransparency, topTransparency }) =&gt; ({
    backgroundColor: theme.color,
    zIndex: 1000000,
    background: `linear-gradient(0deg, ${theme.colorEnd ||
      tinycolor(theme.color)

flexDirection: 'column',
    alignItems: 'center'
  },
  firstSection: {
    backgroundColor: theme.color.primary,
    fontSize: `${5 * fontScale}px`
  },
  secondSection: {
    backgroundColor: theme.color.secondary,
    fontSize: `${7 * fontScale}px`
  },
  thirdSection: {
    backgroundColor: theme.color.additional,
    fontSize: `${10 * fontScale}px`
  },
}))(withTheme(ComplexComponent))

var className = _ref.className,
      props = _objectWithoutProperties(_ref, ['className']);

  return React.createElement(ReactModal2, _extends({ backdropClassName: className }, props));
};

var getLogo = function getLogo(x) {
  if (typeof x === 'function') {
    return x();
  }
  return React.createElement('img', { src: x, alt: 'logo' });
};

var _ref3 = React.createElement(_Modal, { visible: false });

var Modal = withTheme(function (_ref2) {
  var isOpen = _ref2.isOpen,
      showLogo = _ref2.showLogo,
      leftButtons = _ref2.leftButtons,
      rightButtons = _ref2.rightButtons,
      className = _ref2.className,
      subtitle = _ref2.subtitle,
      onClose = _ref2.onClose,
      onCancel = _ref2.onCancel,
      okText = _ref2.okText,
      cancelText = _ref2.cancelText,
      onOk = _ref2.onOk,
      title = _ref2.title,
      loading = _ref2.loading,
      theme = _ref2.theme,
      noPortal = _ref2.noPortal,
      props = _objectWithoutProperties(_ref2, ['isOpen', 'showLogo', 'leftButtons', 'rightButtons', 'className', 'subtitle', 'onClose', 'onCancel', 'okText', 'cancelText', 'onOk', 'title', 'loading', 'theme', 'noPortal']);

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React, { Children } from 'react';
import { createComponent } from 'olymp-fela';
import { withTheme } from 'react-fela';
import { Link } from 'olymp-router';
import Form from 'olymp-ui/form';
import Modal from '../modal';

var def = withTheme(function (_ref) {
  var showLogo = _ref.showLogo,
      isOpen = _ref.isOpen,
      title = _ref.title,
      pathname = _ref.pathname,
      onCancel = _ref.onCancel,
      onOk = _ref.onOk,
      cancelText = _ref.cancelText,
      okText = _ref.okText,
      loading = _ref.loading,
      saving = _ref.saving,
      theme = _ref.theme,
      version = _ref.version,
      props = _objectWithoutProperties(_ref, ['showLogo', 'isOpen', 'title', 'pathname', 'onCancel', 'onOk', 'cancelText', 'okText', 'loading', 'saving', 'theme', 'version']);

  var links = null;
  var children = Children.toArray(props.children).filter(function (child) {

import React, { Children } from 'react';
import { createComponent } from 'olymp-fela';
import { withTheme } from 'react-fela';
import { Link } from 'olymp-router';
import Form from 'olymp-ui/form';
import Modal from '../modal';

const def = withTheme(
  ({
    showLogo,
    isOpen,
    title,
    pathname,
    onCancel,
    onOk,
    cancelText,
    okText,
    loading,
    saving,
    theme,
    version,
    ...props
  }) => {
    let links = null;