import React from 'react';
import 'react-dom';
import '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import { T as Tooltip } from '../index-6829ab1f.js';
import space from '@styled-system/space';
import color from '@styled-system/color';
import border from '@styled-system/border';
import variant from '@styled-system/variant';
import typography from '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { I as Icon, a as InfoIcon } from '../index-fc484d02.js';
import WithTooltip from '../overlays/withTooltip.js';
import { C as Context } from '../index-155df85b.js';
import Text from './text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from './box.js';

var css_248z = ".Label_label__lzWKR {\n  display: block;\n  color: #666;\n  font-size: 12px;\n  font-weight: 600;\n  margin-bottom: 6px;\n  margin-left: 2px;\n  transition: 0.2s ease-out; }\n  .Label_label__lzWKR.Label_error__2T6RD {\n    opacity: 0.9;\n    color: #f44336; }\n\n.Label_container__3eUn3 {\n  display: flex; }\n\n.Label_tooltip__10Gf8 {\n  position: relative;\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  vertical-align: middle;\n  top: -1px;\n  margin-left: 4px; }\n\n.Label_tooltipIcon__3Sjdx {\n  width: 16px;\n  height: 16px; }\n";
var styles = {"label":"Label_label__lzWKR","error":"Label_error__2T6RD","container":"Label_container__3eUn3","tooltip":"Label_tooltip__10Gf8","tooltipIcon":"Label_tooltipIcon__3Sjdx"};
styleInject(css_248z);

var labelMode = variant({
  prop: "mode",
  scale: "labelModes",
  variants: {
    focussed: {}
  }
});

// Non customizable CSS props
var labelWrapperStyle = {
  position: "relative",
  display: "flex",
  alignItems: "center"
};
var labelStyle = {
  position: "relative"
};
var ThemedLabelWrapper = styled(Box)(labelWrapperStyle, space, color, border, typography);
var ThemedLabel = styled(Text)(labelStyle, space, color, border, typography, labelMode);

// Customizable CSS props
ThemedLabelWrapper.defaultProps = {
  fontFamily: "\"Proxima Nova\", sans-serif",
  mode: "default",
  variant: "default",
  padding: "zero"
};
ThemedLabel.defaultProps = {
  fontFamily: "\"Proxima Nova\", sans-serif",
  variant: "h4.semi-bold",
  marginRight: "xs"
};

var Label = function Label(_ref) {
  var children = _ref.children,
    className = _ref.className,
    focused = _ref.focused,
    error = _ref.error,
    disabled = _ref.disabled,
    tooltip = _ref.tooltip,
    themed = _ref.themed;
  if (!children) return null;
  var _React$useContext = React.useContext(Context),
    primaryColor = _React$useContext.primaryColor;
  var focusedStyle = !disabled && focused ? {
    color: primaryColor
  } : {};
  var errorClassName = error ? styles.error : "";
  var renderLabel = function renderLabel() {
    if (themed && (children || error)) {
      var mode = "default";
      if (!disabled && focused) {
        mode = "focussed";
      }
      if (error) {
        mode = "error";
      }
      return /*#__PURE__*/React.createElement(ThemedLabelWrapper, null, /*#__PURE__*/React.createElement(ThemedLabel, {
        mode: mode
      }, children), tooltip ? /*#__PURE__*/React.createElement(Tooltip, {
        tooltip: tooltip,
        position: "TOP",
        themed: true
      }, /*#__PURE__*/React.createElement(Icon, {
        src: InfoIcon,
        size: Icon.SIZES.SMALL,
        style: {
          marginBottom: 8
        }
      })) : null);
    }
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(styles.container)
    }, /*#__PURE__*/React.createElement("span", {
      style: focusedStyle,
      className: "".concat(styles.label, " ").concat(className, " ").concat(errorClassName)
    }, children, tooltip ? /*#__PURE__*/React.createElement(WithTooltip, {
      className: "".concat(styles.tooltip),
      tooltip: tooltip,
      position: "TOP"
    }, /*#__PURE__*/React.createElement(Icon, {
      className: "".concat(styles.tooltipIcon),
      src: InfoIcon
    })) : null), error && typeof error === "string" ? /*#__PURE__*/React.createElement("span", {
      className: "".concat(styles.label, " ").concat(errorClassName)
    }, "(".concat(error, ")")) : null);
  };
  return renderLabel();
};
Label.propTypes = {
  children: PropTypes.node || PropTypes.string,
  tooltip: PropTypes.string,
  className: PropTypes.string,
  focused: PropTypes.bool,
  error: PropTypes.bool,
  disabled: PropTypes.bool,
  themed: PropTypes.bool
};
Label.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Label",
  "props": {
    "children": {
      "type": {
        "name": "custom",
        "raw": "PropTypes.node || PropTypes.string"
      },
      "required": false,
      "description": ""
    },
    "tooltip": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "focused": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "error": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "disabled": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  }
};

export default Label;
export { Label };
