import React from 'react';
import styled from 'styled-components';
import { Typography } from '../..';
import { visuallyHiddenCss as visuallyHidden } from '../VisuallyHidden';
var StyledLabel = styled.label.withConfig({
  displayName: "FormLabel__StyledLabel",
  componentId: "sc-skax1c-0"
})(["", " text-overflow:ellipsis;white-space:nowrap;cursor:", ";"], function (p) {
  return p.hidden ? visuallyHidden : '';
}, function (_ref) {
  var $disabled = _ref.$disabled;
  return $disabled ? 'not-allowed' : 'pointer';
});
export var FormLabel = function FormLabel(_ref2) {
  var as = _ref2.as,
    children = _ref2.children,
    className = _ref2.className,
    forId = _ref2.forId,
    hideLabel = _ref2.hideLabel,
    disabled = _ref2.disabled;
  return React.createElement(StyledLabel, {
    as: as,
    className: className,
    htmlFor: forId,
    hidden: Boolean(hideLabel),
    $disabled: disabled
  }, React.createElement(Typography, {
    type: "secondary",
    color: function color(t) {
      return disabled ? t.color.disabledText : t.color.label;
    }
  }, children));
};
FormLabel.displayName = 'FormLabel';