@primer/react/lib/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var Text = require('../../../Text/Text.js');
var CheckboxOrRadioGroupContext = require('./CheckboxOrRadioGroupContext.js');
var CheckboxOrRadioGroup_module = require('./CheckboxOrRadioGroup.module.css.js');
var FeatureFlag = require('./FeatureFlag.js');
require('../../../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../../../FeatureFlags/useFeatureFlag.js');
require('../../../FeatureFlags/DefaultFeatureFlags.js');
var clsx = require('clsx');

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

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

const CheckboxOrRadioGroupCaption = ({
  className,
  children,
  sx
}) => {
  const {
    disabled,
    captionId
  } = React__default.default.useContext(CheckboxOrRadioGroupContext);
  const enabled = useFeatureFlag.useFeatureFlag(FeatureFlag.CSS_MODULES_FLAG);
  if (enabled) {
    if (sx) {
      return /*#__PURE__*/React__default.default.createElement(Text, {
        className: clsx.clsx(className, CheckboxOrRadioGroup_module.CheckboxOrRadioGroupCaption),
        id: captionId,
        sx: sx
      }, children);
    }
    return /*#__PURE__*/React__default.default.createElement("span", {
      className: clsx.clsx(className, CheckboxOrRadioGroup_module.CheckboxOrRadioGroupCaption),
      id: captionId
    }, children);
  }
  return /*#__PURE__*/React__default.default.createElement(Text, {
    color: disabled ? 'fg.muted' : 'fg.subtle',
    fontSize: 1,
    id: captionId,
    sx: sx,
    className: className
  }, children);
};
CheckboxOrRadioGroupCaption.displayName = "CheckboxOrRadioGroupCaption";

module.exports = CheckboxOrRadioGroupCaption;