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

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import styled from 'styled-components';
import React, { forwardRef } from 'react';
import { TYPOGRAPHY, COMMON } from '../constants.js';
import sx from '../sx.js';
import '../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
import '../FeatureFlags/DefaultFeatureFlags.js';
import Box from '../Box/Box.js';
import '@primer/behaviors/utils';
import '@primer/behaviors';
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
import { includesSystemProps } from '../utils/includeSystemProps.js';
import classes from './Text.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 StyledText = styled.span.withConfig({
  displayName: "Text__StyledText",
  componentId: "sc-17v1xeu-0"
})(["", ";", ";&:where([data-size='small']){font-size:var(--text-body-size-small,0.75rem);line-height:var(--text-body-lineHeight-small,1.6666);}&:where([data-size='medium']){font-size:var(--text-body-size-medium,0.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);}&:where([data-size='large']){font-size:var(--text-body-size-large,1rem);line-height:var(--text-body-lineHeight-large,1.5);}&:where([data-weight='light']){font-weight:var(--base-text-weight-light,300);}&:where([data-weight='normal']){font-weight:var(--base-text-weight-normal,400);}&:where([data-weight='medium']){font-weight:var(--base-text-weight-medium,500);}&:where([data-weight='semibold']){font-weight:var(--base-text-weight-semibold,600);}", ";"], TYPOGRAPHY, COMMON, sx);
const Text = /*#__PURE__*/forwardRef(({
  as: Component = 'span',
  className,
  size,
  weight,
  ...props
}, forwardedRef) => {
  const enabled = useFeatureFlag('primer_react_css_modules_ga');
  const innerRef = React.useRef(null);
  useRefObjectAsForwardedRef(forwardedRef, innerRef);
  if (enabled) {
    // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component
    if (includesSystemProps(props)) {
      return (
        /*#__PURE__*/
        // @ts-ignore shh
        React.createElement(Box, _extends({
          as: Component,
          className: clsx(className, classes.Text),
          "data-size": size,
          "data-weight": weight
        }, props, {
          // @ts-ignore shh
          ref: innerRef
        }))
      );
    }
    return /*#__PURE__*/React.createElement(Component, _extends({
      className: clsx(className, classes.Text),
      "data-size": size,
      "data-weight": weight
    }, props, {
      // @ts-ignore shh
      ref: innerRef
    }));
  }
  return /*#__PURE__*/React.createElement(StyledText, _extends({
    as: Component,
    className: className,
    "data-size": size,
    "data-weight": weight
  }, props, {
    // @ts-ignore shh
    ref: innerRef
  }));
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
});
Text.displayName = 'Text';

export { Text as default };