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

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { get } from '../constants.js';
import { useFormControlContext } from './_FormControlContext.js';
import styled from 'styled-components';
import sx from '../sx.js';
import { jsx } from 'react/jsx-runtime';

const FormControlLeadingVisual = t0 => {
  const $ = c(5);
  const {
    children,
    sx
  } = t0;
  const {
    disabled,
    captionId
  } = useFormControlContext();
  const t1 = disabled ? "" : undefined;
  const t2 = captionId ? "" : undefined;
  let t3;
  if ($[0] !== children || $[1] !== sx || $[2] !== t1 || $[3] !== t2) {
    t3 = /*#__PURE__*/jsx(StyledLeadingVisual, {
      "data-control-disabled": t1,
      "data-has-caption": t2,
      sx: sx,
      children: children
    });
    $[0] = children;
    $[1] = sx;
    $[2] = t1;
    $[3] = t2;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  return t3;
};
const StyledLeadingVisual = styled.div.withConfig({
  displayName: "FormControlLeadingVisual__StyledLeadingVisual",
  componentId: "sc-1c26i0t-0"
})(["--leadingVisual-size:", ";color:var(--fgColor-default);display:flex;align-items:center;&:where([data-control-disabled]){color:var(--control-fgColor-disabled);}& > *{min-width:var(--leadingVisual-size);min-height:var(--leadingVisual-size);fill:currentColor;}&:where([data-has-caption]){--leadingVisual-size:", ";}", ""], get('fontSizes.2'), get('fontSizes.4'), sx);

export { FormControlLeadingVisual as default };