text: import { jsx } from '@emotion/core';
  import React__default from 'react';
  import _pt from 'prop-types';
  import { Link } from 'gatsby';
  import { stepNumberCss, stepNumberActiveCss, stepNumberDoneCss, labelCss, labelActiveCss, baseCss, activeCss, linkCss } from './StepIndicatorStep.styles.esm.js';
  
  function StepIndicatorStep(_ref) {
    var children = _ref.children,
        to = _ref.to,
        _ref$status = _ref.status,
        status = _ref$status === void 0 ? "DEFAULT" : _ref$status,
        onClick = _ref.onClick;
    var label = jsx(React__default.Fragment, null, jsx("span", {
      css: function css(theme) {
        return [stepNumberCss(theme), status === "ACTIVE" && stepNumberActiveCss(theme), status === "DONE" && stepNumberDoneCss(theme)];
      }
    }), jsx("span", {
      css: function css(theme) {
        return [labelCss(theme), status === "ACTIVE" && labelActiveCss()];
      }
    }, children));
    return jsx("li", {
      css: function css(theme) {
        return [baseCss(theme), status === "ACTIVE" && activeCss(theme)];
      }
    }, to ? jsx(Link, {
      to: to,
      onClick: onClick,
      css: linkCss
    }, label) : label);
  }
  StepIndicatorStep.propTypes = {
    children: _pt.node,
    to: _pt.string,
    status: _pt.oneOf(["DEFAULT", "ACTIVE", "DONE"])
  };
  StepIndicatorStep.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "StepIndicatorStep",
    "props": {
      "status": {
        "defaultValue": {
          "value": "`DEFAULT`",
          "computed": false
        },
        "required": false,
        "tsType": {
          "name": "union",
          "raw": "`DEFAULT` | `ACTIVE` | `DONE`",
          "elements": [{
            "name": "literal",
            "value": "undefined"
          }, {
            "name": "literal",
            "value": "undefined"
          }, {
            "name": "literal",
            "value": "undefined"
          }]
        },
        "description": ""
      },
      "children": {
        "required": false,
        "tsType": {
          "name": "ReactReactNode",
          "raw": "React.ReactNode"
        },
        "description": ""
      },
      "to": {
        "required": false,
        "tsType": {
          "name": "string"
        },
        "description": ""
      },
      "onClick": {
        "required": false,
        "tsType": {
          "name": "GatsbyLinkProps[\"onClick\"]",
          "raw": "GatsbyLinkProps<any>[\"onClick\"]"
        },
        "description": ""
      }
    }
  };
  
  if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
    STORYBOOK_REACT_CLASSES["src/components/StepIndicator/StepIndicatorStep.tsx"] = {
      name: "StepIndicatorStep",
      docgenInfo: StepIndicatorStep.__docgenInfo,
      path: "src/components/StepIndicator/StepIndicatorStep.tsx"
    };
  }
  
  export { StepIndicatorStep };
  //# sourceMappingURL=StepIndicatorStep.esm.js.map
  