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

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { get } from '../constants.js';
import { useFormControlContext } from './_FormControlContext.js';
import styled from 'styled-components';
import sx from '../sx.js';

const FormControlLeadingVisual = ({
  children,
  sx
}) => {
  const {
    disabled,
    captionId
  } = useFormControlContext();
  return /*#__PURE__*/React.createElement(StyledLeadingVisual, {
    "data-control-disabled": disabled ? '' : undefined,
    "data-has-caption": captionId ? '' : undefined,
    sx: sx
  }, children);
};
FormControlLeadingVisual.displayName = "FormControlLeadingVisual";
const StyledLeadingVisual = styled.div.withConfig({
  displayName: "FormControlLeadingVisual__StyledLeadingVisual",
  componentId: "sc-1c26i0t-0"
})(["--leadingVisual-size:", ";color:var(--fgColor-default);margin-inline-start:", ";&:where([data-control-disabled]){color:var(--fgColor-muted);}& > *{min-width:var(--leadingVisual-size);min-height:var(--leadingVisual-size);fill:currentColor;}&:where([data-has-caption]){--leadingVisual-size:", ";}", ""], get('fontSizes.2'), get('space.2'), get('fontSizes.4'), sx);

export { FormControlLeadingVisual as default };