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

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import React from 'react';
import styled from 'styled-components';
import { cssModulesFlag } from './feature-flags.js';
import '../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
import '../FeatureFlags/DefaultFeatureFlags.js';
import Text from '../Text/Text.js';
import sx from '../sx.js';
import classes from './FormControlCaption.module.css.js';
import { useFormControlContext } from './_FormControlContext.js';
import { toggleStyledComponent } from '../internal/utils/toggleStyledComponent.js';

function FormControlCaption({
  id,
  children,
  sx
}) {
  const enabled = useFeatureFlag(cssModulesFlag);
  const {
    captionId,
    disabled
  } = useFormControlContext();
  return /*#__PURE__*/React.createElement(StyledCaption, {
    id: id !== null && id !== undefined ? id : captionId,
    className: clsx({
      [classes.Caption]: enabled
    }),
    "data-control-disabled": disabled ? '' : undefined,
    sx: sx
  }, children);
}
FormControlCaption.displayName = "FormControlCaption";
const StyledCaption = toggleStyledComponent(cssModulesFlag, Text, styled(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));

export { FormControlCaption };