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

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var constants = require('../constants.js');
var _FormControlContext = require('./_FormControlContext.js');
var styled = require('styled-components');
var sx = require('../sx.js');

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

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

const FormControlLeadingVisual = ({
  children,
  sx
}) => {
  const {
    disabled,
    captionId
  } = _FormControlContext.useFormControlContext();
  return /*#__PURE__*/React__default.default.createElement(StyledLeadingVisual, {
    "data-control-disabled": disabled ? '' : undefined,
    "data-has-caption": captionId ? '' : undefined,
    sx: sx
  }, children);
};
FormControlLeadingVisual.displayName = "FormControlLeadingVisual";
const StyledLeadingVisual = styled__default.default.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:", ";}", ""], constants.get('fontSizes.2'), constants.get('space.2'), constants.get('fontSizes.4'), sx.default);

module.exports = FormControlLeadingVisual;