@equinor/eds-core-react/dist/esm/components/InputWrapper/HelperText/HelperText.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import { typographyMixin } from '@equinor/eds-utils';
import { helperText } from './HelperText.token.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const Container = styled.div.withConfig({
  displayName: "HelperText__Container",
  componentId: "sc-189ug61-0"
})(({
  color
}) => css({
  display: 'grid',
  gap: '8px',
  gridAutoFlow: 'column',
  alignItems: 'start',
  justifyContent: 'start',
  color
}));
const Text = styled.p.withConfig({
  displayName: "HelperText__Text",
  componentId: "sc-189ug61-1"
})(["margin:0;", ";white-space:pre-line;"], typographyMixin(helperText.typography));
const TextfieldHelperText = /*#__PURE__*/forwardRef(function TextfieldHelperText({
  text,
  icon,
  color = helperText.typography.color,
  ...rest
}, ref) {
  if (!text) {
    return null;
  }
  return /*#__PURE__*/jsxs(Container, {
    ...rest,
    color,
    ref,
    children: [icon, /*#__PURE__*/jsx(Text, {
      children: text
    })]
  });
});

export { TextfieldHelperText as HelperText };