function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  & a {\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 12px;\n    border-bottom: none;\n    color: #000;\n\n    &:hover {\n      background-color: rgba(0, 0, 0, 0.1);\n      color: #000;\n    }\n\n    & i {\n      margin-right: 12px;\n      opacity: 0.8;\n    }\n  }\n\n  & span {\n    flex-wrap: nowrap;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import PropTypes from "prop-types";
import { Link } from "react-router";
import { jsx, css } from "@emotion/core";
var storyLinkClass = css(_templateObject());

var StoryLink = function StoryLink(_ref) {
  var children = _ref.children,
      icon = _ref.icon,
      route = _ref.route,
      action = _ref.action,
      link = _ref.link,
      embed = _ref.embed;
  return jsx("div", {
    css: storyLinkClass
  }, route ? jsx(Link, {
    to: route
  }, jsx("i", {
    className: icon
  }), jsx("span", null, children)) : embed ? jsx("a", {
    href: link,
    target: "_blank",
    rel: "noopener noreferrer"
  }, jsx("i", {
    className: icon
  }), jsx("span", null, children)) : link ? jsx("a", {
    href: link
  }, jsx("i", {
    className: icon
  }), jsx("span", null, children)) : jsx("a", {
    tabIndex: "0",
    onClick: action,
    role: "button"
  }, jsx("i", {
    className: icon
  }), jsx("span", null, children)));
};

StoryLink.displayName = "StoryLink";
StoryLink.propTypes = {
  action: PropTypes.func,
  children: PropTypes.node,
  icon: PropTypes.string,
  route: PropTypes.string,
  link: PropTypes.string,
  embed: PropTypes.bool
};
export default StoryLink;