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

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled from 'styled-components';
import { typographyTemplate } from '@equinor/eds-utils';
import { label } from './Label.tokens.js';
import { jsxs, jsx } from 'react/jsx-runtime';

const LabelBase = styled.label.withConfig({
  displayName: "Label__LabelBase",
  componentId: "sc-1gi2bcn-0"
})(["display:flex;justify-content:space-between;align-items:flex-end;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], typographyTemplate(label.typography), label.spacings.left, label.spacings.right, ({
  $disabledText
}) => $disabledText ? label.states.disabled.typography.color : label.typography.color);
const Text = styled.span.withConfig({
  displayName: "Label__Text",
  componentId: "sc-1gi2bcn-1"
})(["margin:0;"]);
const Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
  const {
    label = '',
    meta,
    disabled = false,
    ...other
  } = props;
  return /*#__PURE__*/ /*  @TODO: Other props spread has to be at the end for downshift to create the for attribute */jsxs(LabelBase, {
    ref: ref,
    $disabledText: disabled,
    ...other,
    children: [/*#__PURE__*/jsx(Text, {
      children: label
    }), meta && /*#__PURE__*/jsx(Text, {
      children: meta
    })]
  });
});

// Label.displayName = 'eds-text-field-label'

export { Label };