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

An implementation of GitHub's Primer Design System using React

'use strict';

var clsx = require('clsx');
var React = require('react');
var styled = require('styled-components');
var featureFlags = require('./feature-flags.js');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var Text = require('../Text/Text.js');
var sx = require('../sx.js');
var FormControlCaption_module = require('./FormControlCaption.module.css.js');
var _FormControlContext = require('./_FormControlContext.js');
var toggleStyledComponent = require('../internal/utils/toggleStyledComponent.js');

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

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

function FormControlCaption({
  id,
  children,
  sx
}) {
  const enabled = useFeatureFlag.useFeatureFlag(featureFlags.cssModulesFlag);
  const {
    captionId,
    disabled
  } = _FormControlContext.useFormControlContext();
  return /*#__PURE__*/React__default.default.createElement(StyledCaption, {
    id: id !== null && id !== undefined ? id : captionId,
    className: clsx.clsx({
      [FormControlCaption_module.Caption]: enabled
    }),
    "data-control-disabled": disabled ? '' : undefined,
    sx: sx
  }, children);
}
FormControlCaption.displayName = "FormControlCaption";
const StyledCaption = toggleStyledComponent.toggleStyledComponent(featureFlags.cssModulesFlag, Text, styled__default.default(Text).withConfig({
  displayName: "FormControlCaption__StyledCaption",
  componentId: "sc-u5w2b2-0"
})(["color:var(--fgColor-muted);display:block;font-size:var(--text-body-size-small);&:where([data-control-disabled]){color:var(--control-fgColor-disabled);}", ""], sx.default));

exports.FormControlCaption = FormControlCaption;