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

An implementation of GitHub's Primer Design System using React

'use strict';

var clsx = require('clsx');
var React = require('react');
var styled = require('styled-components');
var sx = require('../../sx.js');
var featureFlags = require('../../FormControl/feature-flags.js');
require('../../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../../FeatureFlags/useFeatureFlag.js');
require('../../FeatureFlags/DefaultFeatureFlags.js');
var InputLabel_module = require('./InputLabel.module.css.js');
var toggleStyledComponent = require('../utils/toggleStyledComponent.js');

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

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

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.useFeatureFlag(featureFlags.cssModulesFlag);
  return /*#__PURE__*/React__default.default.createElement(StyledLabel, _extends({
    as: as,
    "data-control-disabled": disabled ? '' : undefined,
    "data-visually-hidden": visuallyHidden ? '' : undefined,
    htmlFor: htmlFor,
    id: id,
    className: clsx.clsx(className, {
      [InputLabel_module.Label]: enabled
    }),
    sx: sx
  }, props), required || requiredText ? /*#__PURE__*/React__default.default.createElement(StyledRequiredText, {
    className: clsx.clsx({
      [InputLabel_module.RequiredText]: enabled
    })
  }, /*#__PURE__*/React__default.default.createElement("span", null, children), /*#__PURE__*/React__default.default.createElement("span", {
    "aria-hidden": requiredIndicator ? undefined : true
  }, requiredText !== null && requiredText !== undefined ? requiredText : '*')) : children);
}
InputLabel.displayName = "InputLabel";
const StyledLabel = toggleStyledComponent.toggleStyledComponent(featureFlags.cssModulesFlag, 'label', styled__default.default.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.default));
const StyledRequiredText = toggleStyledComponent.toggleStyledComponent(featureFlags.cssModulesFlag, 'span', styled__default.default.span.withConfig({
  displayName: "InputLabel__StyledRequiredText",
  componentId: "sc-l3hcqt-1"
})(["display:flex;column-gap:var(--base-size-4);"]));

exports.InputLabel = InputLabel;