@primer/react/lib-esm/internal/components/InputLabel.js

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import React from 'react';
import styled from 'styled-components';
import sx from '../../sx.js';
import { cssModulesFlag } from '../../FormControl/feature-flags.js';
import '../../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../../FeatureFlags/useFeatureFlag.js';
import '../../FeatureFlags/DefaultFeatureFlags.js';
import classes from './InputLabel.module.css.js';
import { toggleStyledComponent } from '../utils/toggleStyledComponent.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); }
function InputLabel({
  children,
  disabled,
  htmlFor,
  id,
  required,
  requiredText,
  requiredIndicator,
  visuallyHidden,
  sx,
  as = 'label',
  className,
  ...props
}) {
  const enabled = useFeatureFlag(cssModulesFlag);
  return /*#__PURE__*/React.createElement(StyledLabel, _extends({
    as: as,
    "data-control-disabled": disabled ? '' : undefined,
    "data-visually-hidden": visuallyHidden ? '' : undefined,
    htmlFor: htmlFor,
    id: id,
    className: clsx(className, {
      [classes.Label]: enabled
    }),
    sx: sx
  }, props), required || requiredText ? /*#__PURE__*/React.createElement(StyledRequiredText, {
    className: clsx({
      [classes.RequiredText]: enabled
    })
  }, /*#__PURE__*/React.createElement("span", null, children), /*#__PURE__*/React.createElement("span", {
    "aria-hidden": requiredIndicator ? undefined : true
  }, requiredText !== null && requiredText !== undefined ? requiredText : '*')) : children);
}
InputLabel.displayName = "InputLabel";
const StyledLabel = toggleStyledComponent(cssModulesFlag, 'label', styled.label.withConfig({
  displayName: "InputLabel__StyledLabel",
  componentId: "sc-l3hcqt-0"
})(["align-self:flex-start;display:block;color:var(--fgColor-default);cursor:pointer;font-weight:600;font-size:var(--text-body-size-medium);&:where([data-control-disabled]){color:var(--fgColor-muted);cursor:not-allowed;}&:where([data-visually-hidden]){border:0;clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;}", ""], sx));
const StyledRequiredText = toggleStyledComponent(cssModulesFlag, 'span', styled.span.withConfig({
  displayName: "InputLabel__StyledRequiredText",
  componentId: "sc-l3hcqt-1"
})(["display:flex;column-gap:var(--base-size-4);"]));

export { InputLabel };