How to use the aphrodite/no-important.StyleSheet function in aphrodite

function Arrow(_ref) {
  var direction = _ref.direction,
      icon = _ref.icon,
      onClick = _ref.onClick,
      size = _ref.size,
      theme = _ref.theme,
      props = _objectWithoutProperties(_ref, ['direction', 'icon', 'onClick', 'size', 'theme']);

  var classes = _noImportant.StyleSheet.create((0, _util.deepMerge)(defaultStyles, theme));

  return _react2.default.createElement(
    'button',
    _extends({
      type: 'button' // default: submit
      , className: (0, _noImportant.css)(classes.arrow, classes['arrow__direction__' + direction], size && classes['arrow__size__' + size]),
      onClick: onClick,
      onTouchEnd: onClick
    }, props),
    _react2.default.createElement(_Icon2.default, { fill: !!theme.arrow && theme.arrow.fill || _theme2.default.arrow.fill, type: icon })
  );
}

CONTAINER_FONT_COLOR = "rgb(255, 255, 255)";
          CONTAINER_FONT_COLOR_HOVER = "rgb(255, 255, 255)";
          CONTAINER_BORDER = "1px solid rgb(59, 89, 152)";
          SHARE_COUNTER_BORDER_LEFT = "1px solid rgba(255, 255, 255, 0.4)";
          break;
        default:
          CONTAINER_BACKGROUND = "rgb(59, 89, 152)";
          CONTAINER_BACKGROUND_HOVER = "rgb(59, 99, 162)";
          CONTAINER_FONT_COLOR = "rgb(255, 255, 255)";
          CONTAINER_FONT_COLOR_HOVER = "rgb(255, 255, 255)";
          CONTAINER_BORDER = "1px solid rgb(59, 89, 152)";
          SHARE_COUNTER_BORDER_LEFT = "1px solid rgba(255, 255, 255, 0.4)";
          break;
      }

      var Theme = _noImportant.StyleSheet.create({
        container: {
          background: CONTAINER_BACKGROUND,
          color: CONTAINER_FONT_COLOR,
          border: CONTAINER_BORDER,
          ":hover": {
            background: CONTAINER_BACKGROUND_HOVER,
            color: CONTAINER_FONT_COLOR_HOVER
          }
        },
        share_counter: {
          borderLeft: SHARE_COUNTER_BORDER_LEFT
        }
      });

      // Return element
      return React.createElement(

var _Arrow2 = _interopRequireDefault(_Arrow);

var _theme = require('../theme');

var _theme2 = _interopRequireDefault(_theme);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var classes = _noImportant.StyleSheet.create({
  paginatedThumbnails: {
    bottom: _theme2.default.container.gutter.vertical,
    height: _theme2.default.thumbnail.size,
    padding: '0 50px',
    position: 'absolute',
    textAlign: 'center',
    whiteSpace: 'nowrap',
    left: '50%',
    transform: 'translateX(-50%)'
  }
});

var arrowStyles = {
  height: _theme2.default.thumbnail.size + _theme2.default.thumbnail.gutter * 2,
  width: 40
};

function Arrow(_ref, _ref2) {
	var direction = _ref.direction;
	var icon = _ref.icon;
	var onClick = _ref.onClick;
	var size = _ref.size;

	var props = _objectWithoutProperties(_ref, ['direction', 'icon', 'onClick', 'size']);

	var theme = _ref2.theme;

	var classes = _aphroditeNoImportant.StyleSheet.create((0, _utils.deepMerge)(defaultStyles, theme));

	return _react2['default'].createElement(
		'button',
		_extends({
			type: 'button',
			className: (0, _aphroditeNoImportant.css)(classes.arrow, classes['arrow__direction__' + direction], size && classes['arrow__size__' + size]),
			onClick: onClick,
			onTouchEnd: onClick
		}, props),
		_react2['default'].createElement(_Icon2['default'], { fill: !!theme.arrow && theme.arrow.fill || _theme2['default'].arrow.fill, type: icon })
	);
};

function Lightbox(props) {
    _classCallCheck(this, Lightbox);

    var _this = _possibleConstructorReturn(this, (Lightbox.__proto__ || Object.getPrototypeOf(Lightbox)).call(this, props));

    _this.theme = (0, _utils.deepMerge)(_theme2.default, props.theme);
    _this.classes = _noImportant.StyleSheet.create((0, _utils.deepMerge)(defaultStyles, _this.theme));
    _utils.bindFunctions.call(_this, ['gotoNext', 'gotoPrev', 'closeBackdrop', 'handleKeyboardInput']);
    return _this;
  }

function Header(_ref) {
  var customControls = _ref.customControls,
      onClose = _ref.onClose,
      showCloseBtn = _ref.showCloseBtn,
      closeBtnTitle = _ref.closeBtnTitle,
      theme = _ref.theme,
      props = _objectWithoutProperties(_ref, ['customControls', 'onClose', 'showCloseBtn', 'closeBtnTitle', 'theme']);

  var classes = _noImportant.StyleSheet.create((0, _util.deepMerge)(defaultStyles, theme));

  return _react2.default.createElement(
    'div',
    _extends({ className: (0, _noImportant.css)(classes.header) }, props),
    customControls ? customControls : _react2.default.createElement('span', null),
    !!showCloseBtn && _react2.default.createElement(
      'button',
      {
        title: closeBtnTitle,
        className: (0, _noImportant.css)(classes.close),
        onClick: onClose
      },
      _react2.default.createElement(_Icon2.default, { fill: !!theme.close && theme.close.fill || _theme2.default.close.fill, type: 'close' })
    )
  );
}

function Container(_ref, _ref2) {
  var theme = _ref2.theme;

  var props = _objectWithoutProperties(_ref, []);

  var classes = _noImportant.StyleSheet.create((0, _utils.deepMerge)(defaultStyles, theme));

  return _react2.default.createElement('div', _extends({ id: 'lightboxBackdrop', className: (0, _noImportant.css)(classes.container) }, props));
}

active: idx === currentImage,
				index: idx,
				key: idx,
				onClick: onClickThumbnail
			}));
		})
	);
}

Thumbnails.propTypes = {
	currentImage: _propTypes2.default.number,
	images: _propTypes2.default.array,
	onClickThumbnail: _propTypes2.default.func.isRequired
};

var classes = _noImportant.StyleSheet.create({
	thumbnails: {
		bottom: _theme2.default.container.gutter.vertical,
		color: 'white',
		height: _theme2.default.thumbnail.size,
		left: _theme2.default.container.gutter.horizontal,
		overflowX: 'scroll',
		overflowY: 'hidden',
		position: 'absolute',
		right: _theme2.default.container.gutter.horizontal,
		textAlign: 'center',
		whiteSpace: 'nowrap'
	}
});

exports.default = Thumbnails;

function Arrow(_ref, _ref2) {
  var theme = _ref2.theme;

  var direction = _ref.direction,
      icon = _ref.icon,
      onClick = _ref.onClick,
      size = _ref.size,
      props = _objectWithoutProperties(_ref, ['direction', 'icon', 'onClick', 'size']);

  var classes = _noImportant.StyleSheet.create((0, _utils.deepMerge)(defaultStyles, theme));

  return _react2.default.createElement(
    'button',
    _extends({
      type: 'button',
      className: (0, _noImportant.css)(classes.arrow, classes['arrow__direction__' + direction], size && classes['arrow__size__' + size]),
      onClick: onClick,
      onTouchEnd: onClick
    }, props),
    _react2.default.createElement(_Icon2.default, { fill: !!theme.arrow && theme.arrow.fill || _theme2.default.arrow.fill, type: icon })
  );
}

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const no_important_1 = require("aphrodite/no-important");
class Anchor extends React.PureComponent {
    render() {
        const { id, href, noStyle, target, text } = this.props;
        return (React.createElement("a", { id: id, className: no_important_1.css(styles.anchor, noStyle && styles.anchor__noStyle), href: href, target: target, rel: 'noreferrer noopener' }, text.toString()));
    }
}
const styles = no_important_1.StyleSheet.create({
    anchor: {
        color: 'inherit',
        fontSize: 'inherit'
    },
    anchor__noStyle: {
        textDecoration: 'none'
    }
});
exports.default = Anchor;
//# sourceMappingURL=anchor.js.map