import React from 'react';
import 'react-dom';
import '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import Tooltip from '../overlays/tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.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 Icon from './icon.js';
import { I as InfoIcon } from '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import WithTooltip from '../overlays/withTooltip.js';
import { C as Context } from '../index-91504e81.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 = ".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);

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 React.createElement(ThemedLabelWrapper, null, React.createElement(ThemedLabel, {
        mode: mode
      }, children), tooltip ? React.createElement(Tooltip, {
        tooltip: tooltip,
        position: "TOP",
        themed: true
      }, React.createElement(Icon, {
        src: InfoIcon,
        size: Icon.SIZES.SMALL,
        style: {
          marginBottom: 8
        }
      })) : null);
    }

    return React.createElement("div", {
      className: "".concat(styles.container)
    }, React.createElement("span", {
      style: focusedStyle,
      className: "".concat(styles.label, " ").concat(className, " ").concat(errorClassName)
    }, children, tooltip ? React.createElement(WithTooltip, {
      className: "".concat(styles.tooltip),
      tooltip: tooltip,
      position: "TOP"
    }, React.createElement(Icon, {
      className: "".concat(styles.tooltipIcon),
      src: InfoIcon
    })) : null), error && typeof error === "string" ? 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 };
