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

An implementation of GitHub's Primer Design System using React

'use strict';

var clsx = require('clsx');
var styled = require('styled-components');
var React = require('react');
var constants = require('../constants.js');
var sx = require('../sx.js');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var Box = require('../Box/Box.js');
require('@primer/behaviors/utils');
require('@primer/behaviors');
var useRefObjectAsForwardedRef = require('../hooks/useRefObjectAsForwardedRef.js');
var includeSystemProps = require('../utils/includeSystemProps.js');
var Text_module = require('./Text.module.css.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var styled__default = /*#__PURE__*/_interopDefault(styled);
var React__default = /*#__PURE__*/_interopDefault(React);

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__default.default.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);}", ";"], constants.TYPOGRAPHY, constants.COMMON, sx.default);
const Text = /*#__PURE__*/React.forwardRef(({
  as: Component = 'span',
  className,
  size,
  weight,
  ...props
}, forwardedRef) => {
  const enabled = useFeatureFlag.useFeatureFlag('primer_react_css_modules_ga');
  const innerRef = React__default.default.useRef(null);
  useRefObjectAsForwardedRef.useRefObjectAsForwardedRef(forwardedRef, innerRef);
  if (enabled) {
    // If props includes TYPOGRAPHY or COMMON props, pass them to the Box component
    if (includeSystemProps.includesSystemProps(props)) {
      return (
        /*#__PURE__*/
        // @ts-ignore shh
        React__default.default.createElement(Box, _extends({
          as: Component,
          className: clsx.clsx(className, Text_module.Text),
          "data-size": size,
          "data-weight": weight
        }, props, {
          // @ts-ignore shh
          ref: innerRef
        }))
      );
    }
    return /*#__PURE__*/React__default.default.createElement(Component, _extends({
      className: clsx.clsx(className, Text_module.Text),
      "data-size": size,
      "data-weight": weight
    }, props, {
      // @ts-ignore shh
      ref: innerRef
    }));
  }
  return /*#__PURE__*/React__default.default.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';

module.exports = Text;