import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { Fragment } from 'react';
import _pt from 'prop-types';
import { Link } from 'gatsby';

function Breadcrumb(_ref) {
  var children = _ref.children,
      rest = _objectWithoutProperties(_ref, ["children"]);

  return jsx("nav", _extends({
    "aria-label": "breadcrumb"
  }, rest), jsx("ol", {
    css: {
      listStyle: "none",
      margin: 0,
      padding: 0,
      display: "flex",
      flexWrap: "wrap"
    }
  }, children));
}
Breadcrumb.Item = BreadcrumbItem;

var breadcrumbItemCss = function breadcrumbItemCss(theme) {
  return {
    display: "flex",
    alignItems: "center",
    color: theme.colors.purple[50],
    fontFamily: theme.fonts.heading,
    fontSize: theme.fontSizes[3]
  };
};

function BreadcrumbItem(_ref2) {
  var to = _ref2.to,
      active = _ref2.active,
      onClick = _ref2.onClick,
      children = _ref2.children,
      rest = _objectWithoutProperties(_ref2, ["to", "active", "onClick", "children"]);

  return jsx("li", _extends({
    css: function css(theme) {
      return [breadcrumbItemCss(theme), active && {
        color: theme.colors.grey[90]
      }];
    }
  }, rest), to ? jsx(Fragment, null, jsx(Link, {
    to: to,
    onClick: onClick,
    css: {
      textDecoration: "none",
      color: "inherit"
    }
  }, children), jsx(BreadcrumbArrow, null)) : children);
}

BreadcrumbItem.propTypes = {
  to: _pt.string,
  active: _pt.bool,
  onClick: _pt.func
};
BreadcrumbItem.displayName = "Breadcrumb.Item";

var breadcrumbArrowCss = function breadcrumbArrowCss(theme) {
  return {
    color: theme.colors.grey[60],
    marginRight: theme.space[4],
    marginLeft: theme.space[4],
    verticalAlign: "middle"
  };
};

function BreadcrumbArrow(props) {
  return jsx("svg", _extends({
    width: "6",
    height: "9",
    viewBox: "0 0 6 9",
    fill: "currentColor",
    css: breadcrumbArrowCss
  }, props), jsx("path", {
    d: "M6 4.5L1.5 8.39711L1.5 0.602886L6 4.5Z"
  }));
}

Breadcrumb.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "Item",
    "docblock": null,
    "modifiers": ["static"],
    "params": [{
      "name": "{\n  to,\n  active,\n  onClick,\n  children,\n  ...rest\n}: BreadcrumbItemProps",
      "type": {
        "name": "intersection",
        "raw": "PropsOf<\"li\"> & {\n  to?: string\n  active?: boolean\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n}",
        "elements": [{
          "name": "PropsOf",
          "elements": [{
            "name": "literal",
            "value": "\"li\""
          }],
          "raw": "PropsOf<\"li\">"
        }, {
          "name": "signature",
          "type": "object",
          "raw": "{\n  to?: string\n  active?: boolean\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n}",
          "signature": {
            "properties": [{
              "key": "to",
              "value": {
                "name": "string",
                "required": false
              }
            }, {
              "key": "active",
              "value": {
                "name": "boolean",
                "required": false
              }
            }, {
              "key": "onClick",
              "value": {
                "name": "ReactMouseEventHandler",
                "raw": "React.MouseEventHandler<HTMLAnchorElement>",
                "elements": [{
                  "name": "HTMLAnchorElement"
                }],
                "required": false
              }
            }]
          }
        }],
        "alias": "BreadcrumbItemProps"
      }
    }],
    "returns": null
  }],
  "displayName": "Breadcrumb"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Breadcrumb/Breadcrumb.tsx"] = {
    name: "Breadcrumb",
    docgenInfo: Breadcrumb.__docgenInfo,
    path: "src/components/Breadcrumb/Breadcrumb.tsx"
  };
}

export { Breadcrumb };
//# sourceMappingURL=Breadcrumb.esm.js.map
