@primer/react/lib/FormControl/FormControlLabel.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var _FormControlContext = require('./_FormControlContext.js');
var InputLabel = require('../internal/components/InputLabel.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const FormControlLabel = ({
  as,
  children,
  htmlFor,
  id,
  visuallyHidden,
  requiredIndicator = true,
  requiredText,
  sx,
  className,
  ...props
}) => {
  const {
    disabled,
    id: formControlId,
    required
  } = _FormControlContext.useFormControlContext();

  /**
   * Ensure we can pass through props correctly, since legend/span accept no defined 'htmlFor'
   */
  const labelProps = as === 'legend' || as === 'span' ? {
    as,
    id,
    className,
    visuallyHidden,
    required,
    requiredText,
    requiredIndicator,
    disabled,
    sx,
    ...props
  } : {
    as,
    id,
    className,
    visuallyHidden,
    htmlFor: htmlFor || formControlId,
    required,
    requiredText,
    requiredIndicator,
    disabled,
    sx,
    ...props
  };
  return /*#__PURE__*/React__default.default.createElement(InputLabel.InputLabel, labelProps, children);
};
FormControlLabel.displayName = "FormControlLabel";

module.exports = FormControlLabel;