@primer/react/lib-esm/InlineMessage/InlineMessage.js

An implementation of GitHub's Primer Design System using React

import { AlertIcon, CheckCircleIcon, AlertFillIcon, CheckCircleFillIcon } from '@primer/octicons-react';
import { clsx } from 'clsx';
import React from 'react';
import styled from 'styled-components';
import { get } from '../constants.js';
import { toggleStyledComponent } from '../internal/utils/toggleStyledComponent.js';
import '../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
import '../FeatureFlags/DefaultFeatureFlags.js';
import classes from './InlineMessage.module.css.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff';
const StyledMessage = toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled.div.withConfig({
  displayName: "InlineMessage__StyledMessage",
  componentId: "sc-13z0tw8-0"
})(["display:grid;column-gap:0.5rem;grid-template-columns:auto 1fr;align-items:start;color:var(--inline-message-fgColor,", ");line-height:var(--inline-message-lineHeight);font-size:var(--inline-message-fontSize,", ");&[data-size='small']{--inline-message-fontSize:var(--text-body-size-small,", ");--inline-message-lineHeight:var(--text-body-lineHeight-small,1.6666);}&[data-size='medium']{--inline-message-fontSize:var(--text-body-size-medium,", ");--inline-message-lineHeight:var(--text-body-lineHeight-medium,1.4285);}&[data-variant='warning']{--inline-message-fgColor:", ";}&[data-variant='critical']{--inline-message-fgColor:", ";}&[data-variant='success']{--inline-message-fgColor:", ";}&[data-variant='unavailable']{--inline-message-fgColor:", ";}& .InlineMessageIcon{min-height:calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));}"], get('colors.fg.muted'), get('fontSizes.1'), get('fontSizes.0'), get('fontSizes.1'), get('colors.attention.fg'), get('colors.danger.fg'), get('colors.success.fg'), get('colors.fg.muted')));
const variantToIcon = (enabled, variant) => {
  const icons = {
    warning: /*#__PURE__*/React.createElement(AlertIcon, {
      className: enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'
    }),
    critical: /*#__PURE__*/React.createElement(AlertIcon, {
      className: enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'
    }),
    success: /*#__PURE__*/React.createElement(CheckCircleIcon, {
      className: enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'
    }),
    unavailable: /*#__PURE__*/React.createElement(AlertIcon, {
      className: enabled ? classes.InlineMessageIcon : 'InlineMessageIcon'
    })
  };
  return icons[variant];
};
const variantToSmallIcon = (enabled, variant) => {
  const icons = {
    warning: /*#__PURE__*/React.createElement(AlertFillIcon, {
      className: classes.InlineMessageIcon,
      size: 12
    }),
    critical: /*#__PURE__*/React.createElement(AlertFillIcon, {
      className: classes.InlineMessageIcon,
      size: 12
    }),
    success: /*#__PURE__*/React.createElement(CheckCircleFillIcon, {
      className: classes.InlineMessageIcon,
      size: 12
    }),
    unavailable: /*#__PURE__*/React.createElement(AlertFillIcon, {
      className: classes.InlineMessageIcon,
      size: 12
    })
  };
  return icons[variant];
};
function InlineMessage({
  children,
  className,
  size = 'medium',
  variant,
  ...rest
}) {
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  const icon = size === 'small' ? variantToSmallIcon(enabled, variant) : variantToIcon(enabled, variant);
  return /*#__PURE__*/React.createElement(StyledMessage, _extends({
    className: clsx(className, enabled && classes.InlineMessage)
  }, rest, {
    "data-size": size,
    "data-variant": variant
  }), icon, children);
}
InlineMessage.displayName = "InlineMessage";

export { InlineMessage };