@commercetools-uikit/field-label/dist/commercetools-uikit-field-label.cjs.prod.js

The FieldLabel component represents the label for a field in a form.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
var _styled = require('@emotion/styled/base');
var react = require('react');
require('@commercetools-uikit/utils');
require('@emotion/react');
var SecondaryIconButton = require('@commercetools-uikit/secondary-icon-button');
var icons = require('@commercetools-uikit/icons');
var Text = require('@commercetools-uikit/text');
var Constraints = require('@commercetools-uikit/constraints');
var Inline = require('@commercetools-uikit/spacings-inline');
var Label = require('@commercetools-uikit/label');
var designSystem = require('@commercetools-uikit/design-system');
var jsxRuntime = require('@emotion/react/jsx-runtime');

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

var _styled__default = /*#__PURE__*/_interopDefault(_styled);
var SecondaryIconButton__default = /*#__PURE__*/_interopDefault(SecondaryIconButton);
var Text__default = /*#__PURE__*/_interopDefault(Text);
var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
var Inline__default = /*#__PURE__*/_interopDefault(Inline);
var Label__default = /*#__PURE__*/_interopDefault(Label);

const _excluded = ["horizontalConstraint"];
/*
  This is needed to deal with every FieldLabel row vertical spacing
  when provided `hint` or `description` is a React component which
  might render nothing.
  Previously we were using the `Stack` component but, as we are wrapping
  those props values with some elements, `Stack` was including some vertical
  spacing even when the received values did not render anything.

  The implementation is tightly coupled to how we currently wrap
  those props, so if we change that, we will need to adjust this as well.
*/
const LabelRowWrapper = /*#__PURE__*/_styled__default["default"]("div", {
  target: "erir8oc0"
} )("& [data-key='field-label-hint-wrapper'],& [data-key='field-label-description-wrapper']{margin-top:", designSystem.designTokens.spacing10, "!important;}& [data-key='field-label-hint-wrapper']:empty,& [data-key='field-label-description-wrapper']:empty{margin-top:0!important;}" + ("" ));
var _ref = {
  name: "skgbeu",
  styles: "display:flex;justify-content:flex-end"
} ;
const FieldLabel = _ref2 => {
  let _ref2$horizontalConst = _ref2.horizontalConstraint,
    horizontalConstraint = _ref2$horizontalConst === void 0 ? 'scale' : _ref2$horizontalConst,
    props = _objectWithoutProperties(_ref2, _excluded);
  if (props.hintIcon) ;
  return jsxRuntime.jsxs(Constraints__default["default"].Horizontal, {
    max: horizontalConstraint,
    children: [jsxRuntime.jsxs(Inline__default["default"], {
      alignItems: 'center',
      scale: "xs",
      children: [jsxRuntime.jsx(Text__default["default"].Wrap, {
        children: jsxRuntime.jsx(Label__default["default"], {
          isRequiredIndicatorVisible: props.hasRequiredIndicator,
          tone: props.tone,
          id: props.id,
          htmlFor: props.htmlFor,
          children: props.title
        })
      }), props.onInfoButtonClick && jsxRuntime.jsx(SecondaryIconButton__default["default"], {
        label: "More Info",
        icon: jsxRuntime.jsx(icons.InfoIcon, {}),
        size: "20",
        color: "info",
        onClick: props.onInfoButtonClick
      })]
    }), props.hint && jsxRuntime.jsx(LabelRowWrapper, {
      children: jsxRuntime.jsxs(Inline__default["default"], {
        alignItems: 'center',
        scale: "xs",
        children: [props.hintIcon && jsxRuntime.jsx(Inline__default["default"], {
          "data-key": "field-label-hint-wrapper",
          children: /*#__PURE__*/react.cloneElement(props.hintIcon, {
            size: '30',
            color: props.hintIcon.props.color || 'warning'
          })
        }), props.hint && jsxRuntime.jsx(Text__default["default"].Detail, {
          tone: "secondary",
          "data-key": "field-label-hint-wrapper",
          children: props.hint
        })]
      })
    }), props.description && jsxRuntime.jsx(LabelRowWrapper, {
      children: jsxRuntime.jsx(Text__default["default"].Wrap, {
        children: jsxRuntime.jsx(Text__default["default"].Detail, {
          tone: "secondary",
          "data-key": "field-label-description-wrapper",
          children: props.description
        })
      })
    }), props.badge && jsxRuntime.jsx("div", {
      css: _ref,
      children: props.badge
    })]
  });
};
FieldLabel.displayName = 'FieldLabel';
var FieldLabel$1 = FieldLabel;

// NOTE: This string will be replaced on build time with the package version.
var version = "20.1.0";

exports["default"] = FieldLabel$1;
exports.version = version;