UNPKG

@equinor/eds-core-react

Version:

The React implementation of the Equinor Design System

44 lines (41 loc) 1.08 kB
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 };