@commercetools-uikit/field-label 0.0.0-canary-2021830134526

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# FieldLabel
+
+## Description
+
+The FieldLabel component represents the label for a field in a form. This component can also be used to better explain an input field and to guide the user to fill a form.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/field-label
+```
+
+```
+npm --save install @commercetools-uikit/field-label
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import { defineMessage, FormattedMessage } from 'react-intl';
+import FlatButton from '@commercetools-uikit/flat-button';
+import FieldLabel from '@commercetools-uikit/field-label';
+import { WarningIcon } from '@commercetools-uikit/icons';
+
+const messages = defineMessage();
+
+const Example = () => (
+  <FieldLabel
+    title={<FormattedMessage {...messages.title} />}
+    hasRequiredIndicator={true}
+    onInfoButtonClick={() => {}}
+    hint={<FormattedMessage {...messages.hint} />}
+    hintIcon={<WarningIcon />}
+    description={<FormattedMessage {...messages.description} />}
+    badge={<FlatButton tone="primary" label="show" />}
+    htmlFor="sampleInput"
+    horizontalConstraint={7}
+  />
+);
+
+export default Example;
+```
+
+## Properties
+
+| Props                  | Type                                                                                                  | Required | Default   | Description                                                                                                                                                                                                                                                       |
+| ---------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `title`                | `union`<br/>Possible values:<br/>`string , ReactNode`                                                 |    ✅    |           | Title of the label                                                                                                                                                                                                                                                |
+| `hint`                 | `union`<br/>Possible values:<br/>`string , ReactNode`                                                 |          |           | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas description can describe it in more depth. Can also receive a hintIcon. |
+| `description`          | `union`<br/>Possible values:<br/>`string , ReactNode`                                                 |          |           | Provides a description for the title.                                                                                                                                                                                                                             |
+| `onInfoButtonClick`    | `Function`<br/>[See signature.](#signature-onInfoButtonClick)                                         |          |           | Function called when info button is pressed. Info button will only be visible when this prop is passed.                                                                                                                                                           |
+| `tone`                 | `union`<br/>Possible values:<br/>`'primary' , 'inverted'`                                             |          |           | Indicates the tone to be applied to the label                                                                                                                                                                                                                     |
+| `hintIcon`             | `ReactElement`                                                                                        |          |           | Icon to be displayed beside the hint text. Will only get rendered when hint is passed as well.                                                                                                                                                                    |
+| `badge`                | `ReactNode`                                                                                           |          |           | Badge to be displayed beside the label. Might be used to display additional information about the content of the field (E.g verified email)                                                                                                                       |
+| `hasRequiredIndicator` | `boolean`                                                                                             |          |           | Indicates if the labeled field is required in a form                                                                                                                                                                                                              |
+| `htmlFor`              | `string`                                                                                              |          |           | The for HTML attribute, used to reference form elements with the related attribute id or aria-labelledby.                                                                                                                                                         |
+| `id`                   | `string`                                                                                              |          |           | The id HTML attribute, used to reference non-form elements with the related attribute aria-labelledby.                                                                                                                                                            |
+| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` |          | `'scale'` | Horizontal size limit of the label.                                                                                                                                                                                                                               |
+
+## Signatures
+
+### Signature `onInfoButtonClick`
+
+```ts
+(
+  event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
+) => void
+```
+
+## `hintIcon`
+
+The `hintIcon` also accepts a custom `color` while defaulting to `warning` in the case above. The `hintIcon` does **not** support the `size` prop, and will always be rendered in the size `medium`.
+
+```diff
+<FieldLabel
+  title={<FormattedMessage {...messages.title} />}
+  hasRequiredIndicator={true}
+  onInfoButtonClick={() => {}} />}
+  hint={<FormattedMessage {...messages.hint} />}
+- hintIcon={<WarningIcon />}
++ hintIcon={<WarningIcon color="primary" />}
+  description={<FormattedMessage {...messages.description} />}
+  badge={<FlatButton tone="primary" label="show" />}
+  htmlFor="sampleInput"
+  horizontalConstraint={7}
+/>
+```
+
+## `hint` vs `description`
+
+Most fields will only use the `description` which provides more information about what the entered value will be used for.
+
+The `hint` however is used to show additional information about the value the user enters. It can show the allowed characters. It can also show whether the entered value has errors (like a reference no longer existing in an attribute) when the form is loaded for the first time.
+
+Neither of them should be used for form validation.
+
+## Dos and don'ts
+
+Recommended to be used in vertical forms. (E.g input field below the label, and not besides).

package/dist/commercetools-uikit-field-label.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";

package/dist/commercetools-uikit-field-label.cjs.dev.js

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _pt = require('prop-types');
+var react = require('react');
+var utils = require('@commercetools-uikit/utils');
+require('@emotion/react');
+var IconButton = require('@commercetools-uikit/icon-button');
+var icons = require('@commercetools-uikit/icons');
+var Text = require('@commercetools-uikit/text');
+var Constraints = require('@commercetools-uikit/constraints');
+var Stack = require('@commercetools-uikit/spacings-stack');
+var Inline = require('@commercetools-uikit/spacings-inline');
+var Label = require('@commercetools-uikit/label');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var Stack__default = /*#__PURE__*/_interopDefault(Stack);
+var Inline__default = /*#__PURE__*/_interopDefault(Inline);
+var Label__default = /*#__PURE__*/_interopDefault(Label);
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "skgbeu",
+  styles: "display:flex;justify-content:flex-end"
+} : {
+  name: "pfzph7-FieldLabel",
+  styles: "display:flex;justify-content:flex-end;label:FieldLabel;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpZWxkLWxhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnSm9CIiwiZmlsZSI6ImZpZWxkLWxhYmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIGNsb25lRWxlbWVudCxcbiAgTW91c2VFdmVudCxcbiAgS2V5Ym9hcmRFdmVudCxcbiAgUmVhY3RFbGVtZW50LFxuICBSZWFjdE5vZGUsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHdhcm5pbmcgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC91dGlscyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgSWNvbkJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pY29uLWJ1dHRvbic7XG5pbXBvcnQgeyBJbmZvcm1hdGlvbkljb24gfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pY29ucyc7XG5pbXBvcnQgVGV4dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC90ZXh0JztcbmltcG9ydCBDb25zdHJhaW50cyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3RhY2sgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3Mtc3RhY2snO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuaW1wb3J0IExhYmVsIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2xhYmVsJztcblxuZXhwb3J0IHR5cGUgVEZpZWxkTGFiZWxQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRpdGxlIG9mIHRoZSBsYWJlbFxuICAgKi9cbiAgdGl0bGU6IHN0cmluZyB8IFJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIEhpbnQgZm9yIHRoZSBsYWJlbC4gUHJvdmlkZXMgYSBzdXBwbGVtZW50YXJ5IGJ1dCBpbXBvcnRhbnQgaW5mb3JtYXRpb24gcmVnYXJkaW5nIHRoZSBiZWhhdmlvdXIgb2YgdGhlIGlucHV0IChlLmcgd2FybiBhYm91dCB1bmlxdWVuZXNzIG9mIGEgZmllbGQsIHdoZW4gaXQgY2FuIG9ubHkgYmUgc2V0IG9uY2UpLCB3aGVyZWFzIGRlc2NyaXB0aW9uIGNhbiBkZXNjcmliZSBpdCBpbiBtb3JlIGRlcHRoLiBDYW4gYWxzbyByZWNlaXZlIGEgaGludEljb24uXG4gICAqL1xuICBoaW50Pzogc3RyaW5nIHwgUmVhY3ROb2RlO1xuICAvKipcbiAgICogUHJvdmlkZXMgYSBkZXNjcmlwdGlvbiBmb3IgdGhlIHRpdGxlLlxuICAgKi9cbiAgZGVzY3JpcHRpb24/OiBzdHJpbmcgfCBSZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBGdW5jdGlvbiBjYWxsZWQgd2hlbiBpbmZvIGJ1dHRvbiBpcyBwcmVzc2VkLiBJbmZvIGJ1dHRvbiB3aWxsIG9ubHkgYmUgdmlzaWJsZSB3aGVuIHRoaXMgcHJvcCBpcyBwYXNzZWQuXG4gICAqL1xuICBvbkluZm9CdXR0b25DbGljaz86IChcbiAgICBldmVudDogTW91c2VFdmVudDxIVE1MQnV0dG9uRWxlbWVudD4gfCBLZXlib2FyZEV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICApID0+IHZvaWQ7XG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgdGhlIHRvbmUgdG8gYmUgYXBwbGllZCB0byB0aGUgbGFiZWxcbiAgICovXG4gIHRvbmU/OiAncHJpbWFyeScgfCAnaW52ZXJ0ZWQnO1xuICAvKipcbiAgICogSWNvbiB0byBiZSBkaXNwbGF5ZWQgYmVzaWRlIHRoZSBoaW50IHRleHQuIFdpbGwgb25seSBnZXQgcmVuZGVyZWQgd2hlbiBoaW50IGlzIHBhc3NlZCBhcyB3ZWxsLlxuICAgKi9cbiAgaGludEljb24/OiBSZWFjdEVsZW1lbnQ7XG4gIC8qKlxuICAgKiBCYWRnZSB0byBiZSBkaXNwbGF5ZWQgYmVzaWRlIHRoZSBsYWJlbC4gTWlnaHQgYmUgdXNlZCB0byBkaXNwbGF5IGFkZGl0aW9uYWwgaW5mb3JtYXRpb24gYWJvdXQgdGhlIGNvbnRlbnQgb2YgdGhlIGZpZWxkIChFLmcgdmVyaWZpZWQgZW1haWwpXG4gICAqL1xuICBiYWRnZT86IFJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIEluZGljYXRlcyBpZiB0aGUgbGFiZWxlZCBmaWVsZCBpcyByZXF1aXJlZCBpbiBhIGZvcm1cbiAgICovXG4gIGhhc1JlcXVpcmVkSW5kaWNhdG9yPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIFRoZSBmb3IgSFRNTCBhdHRyaWJ1dGUsIHVzZWQgdG8gcmVmZXJlbmNlIGZvcm0gZWxlbWVudHMgd2l0aCB0aGUgcmVsYXRlZCBhdHRyaWJ1dGUgaWQgb3IgYXJpYS1sYWJlbGxlZGJ5LlxuICAgKi9cbiAgaHRtbEZvcj86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBpZCBIVE1MIGF0dHJpYnV0ZSwgdXNlZCB0byByZWZlcmVuY2Ugbm9uLWZvcm0gZWxlbWVudHMgd2l0aCB0aGUgcmVsYXRlZCBhdHRyaWJ1dGUgYXJpYS1sYWJlbGxlZGJ5LlxuICAgKi9cbiAgaWQ/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBIb3Jpem9udGFsIHNpemUgbGltaXQgb2YgdGhlIGxhYmVsLlxuICAgKi9cbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ/OlxuICAgIHwgM1xuICAgIHwgNFxuICAgIHwgNVxuICAgIHwgNlxuICAgIHwgN1xuICAgIHwgOFxuICAgIHwgOVxuICAgIHwgMTBcbiAgICB8IDExXG4gICAgfCAxMlxuICAgIHwgMTNcbiAgICB8IDE0XG4gICAgfCAxNVxuICAgIHwgMTZcbiAgICB8ICdzY2FsZSdcbiAgICB8ICdhdXRvJztcbn07XG5cbmNvbnN0IEZpZWxkTGFiZWwgPSAocHJvcHM6IFRGaWVsZExhYmVsUHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhpbnRJY29uKSB7XG4gICAgd2FybmluZyhcbiAgICAgIHByb3BzLmhpbnRJY29uLnByb3BzLnNpemUgPT09IHVuZGVmaW5lZCxcbiAgICAgICd1aS1raXQvRmllbGRMYWJlbDogc2V0dGluZyBgaGludEljb25gIHNpemUgaXMgbm90IHN1cHBvcnRlZC4nXG4gICAgKTtcblxuICAgIHdhcm5pbmcoXG4gICAgICBCb29sZWFuKHByb3BzLmhpbnQpLFxuICAgICAgJ3VpLWtpdC9GaWVsZExhYmVsOiBgaGludGAgaXMgcmVxdWlyZWQgd2hlbiBgaGludEljb25gIGlzIHByb3ZpZGVkJ1xuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxDb25zdHJhaW50cy5Ib3Jpem9udGFsIG1heD17cHJvcHMuaG9yaXpvbnRhbENvbnN0cmFpbnR9PlxuICAgICAgPFN0YWNrIHNjYWxlPVwieHNcIj5cbiAgICAgICAgPElubGluZSBhbGlnbkl0ZW1zPVwiZmxleFN0YXJ0XCIgc2NhbGU9XCJ4c1wiPlxuICAgICAgICAgIDxUZXh0LldyYXA+XG4gICAgICAgICAgICA8TGFiZWxcbiAgICAgICAgICAgICAgaXNCb2xkPXt0cnVlfVxuICAgICAgICAgICAgICBpc1JlcXVpcmVkSW5kaWNhdG9yVmlzaWJsZT17cHJvcHMuaGFzUmVxdWlyZWRJbmRpY2F0b3J9XG4gICAgICAgICAgICAgIHRvbmU9e3Byb3BzLnRvbmV9XG4gICAgICAgICAgICAgIGlkPXtwcm9wcy5pZH1cbiAgICAgICAgICAgICAgaHRtbEZvcj17cHJvcHMuaHRtbEZvcn1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3Byb3BzLnRpdGxlfVxuICAgICAgICAgICAgPC9MYWJlbD5cbiAgICAgICAgICA8L1RleHQuV3JhcD5cbiAgICAgICAgICB7cHJvcHMub25JbmZvQnV0dG9uQ2xpY2sgJiYgKFxuICAgICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgICAgbGFiZWw9XCJNb3JlIEluZm9cIlxuICAgICAgICAgICAgICBpY29uPXs8SW5mb3JtYXRpb25JY29uIHNpemU9XCJtZWRpdW1cIiAvPn1cbiAgICAgICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgICAgb25DbGljaz17cHJvcHMub25JbmZvQnV0dG9uQ2xpY2t9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvSW5saW5lPlxuXG4gICAgICAgIHtwcm9wcy5oaW50ICYmIChcbiAgICAgICAgICA8SW5saW5lIGFsaWduSXRlbXM9XCJmbGV4U3RhcnRcIiBzY2FsZT1cInhzXCI+XG4gICAgICAgICAgICB7cHJvcHMuaGludEljb24gJiYgKFxuICAgICAgICAgICAgICA8SW5saW5lPlxuICAgICAgICAgICAgICAgIHtjbG9uZUVsZW1lbnQocHJvcHMuaGludEljb24sIHtcbiAgICAgICAgICAgICAgICAgIC8vIEZJWE1FOiBhZGQgcHJvcGVyIHRvbmUgd2hlbiB0b25lcyBhcmUgcmVmYWN0b3JlZFxuICAgICAgICAgICAgICAgICAgc2l6ZTogJ21lZGl1bScsXG4gICAgICAgICAgICAgICAgICBjb2xvcjogcHJvcHMuaGludEljb24ucHJvcHMuY29sb3IgfHwgJ3dhcm5pbmcnLFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICA8L0lubGluZT5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICB7cHJvcHMuaGludCAmJiAoXG4gICAgICAgICAgICAgIDxUZXh0LkRldGFpbCB0b25lPXtwcm9wcy50b25lfT57cHJvcHMuaGludH08L1RleHQuRGV0YWlsPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICA8L0lubGluZT5cbiAgICAgICAgKX1cbiAgICAgICAge3Byb3BzLmRlc2NyaXB0aW9uICYmIChcbiAgICAgICAgICA8VGV4dC5XcmFwPlxuICAgICAgICAgICAgPFRleHQuRGV0YWlsIHRvbmU9e3Byb3BzLnRvbmV9Pntwcm9wcy5kZXNjcmlwdGlvbn08L1RleHQuRGV0YWlsPlxuICAgICAgICAgIDwvVGV4dC5XcmFwPlxuICAgICAgICApfVxuXG4gICAgICAgIHtwcm9wcy5iYWRnZSAmJiAoXG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtwcm9wcy5iYWRnZX1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKX1cbiAgICAgIDwvU3RhY2s+XG4gICAgPC9Db25zdHJhaW50cy5Ib3Jpem9udGFsPlxuICApO1xufTtcblxuRmllbGRMYWJlbC5kaXNwbGF5TmFtZSA9ICdGaWVsZExhYmVsJztcbkZpZWxkTGFiZWwuZGVmYXVsdFByb3BzID0ge1xuICBob3Jpem9udGFsQ29uc3RyYWludDogJ3NjYWxlJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZpZWxkTGFiZWw7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var FieldLabel = function FieldLabel(props) {
+  if (props.hintIcon) {
+    process.env.NODE_ENV !== "production" ? utils.warning(props.hintIcon.props.size === undefined, 'ui-kit/FieldLabel: setting `hintIcon` size is not supported.') : void 0;
+    process.env.NODE_ENV !== "production" ? utils.warning(Boolean(props.hint), 'ui-kit/FieldLabel: `hint` is required when `hintIcon` is provided') : void 0;
+  }
+
+  return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsxs(Stack__default['default'], {
+      scale: "xs",
+      children: [jsxRuntime.jsxs(Inline__default['default'], {
+        alignItems: "flexStart",
+        scale: "xs",
+        children: [jsxRuntime.jsx(Text__default['default'].Wrap, {
+          children: jsxRuntime.jsx(Label__default['default'], {
+            isBold: true,
+            isRequiredIndicatorVisible: props.hasRequiredIndicator,
+            tone: props.tone,
+            id: props.id,
+            htmlFor: props.htmlFor,
+            children: props.title
+          })
+        }), props.onInfoButtonClick && jsxRuntime.jsx(IconButton__default['default'], {
+          label: "More Info",
+          icon: jsxRuntime.jsx(icons.InformationIcon, {
+            size: "medium"
+          }),
+          size: "small",
+          onClick: props.onInfoButtonClick
+        })]
+      }), props.hint && jsxRuntime.jsxs(Inline__default['default'], {
+        alignItems: "flexStart",
+        scale: "xs",
+        children: [props.hintIcon && jsxRuntime.jsx(Inline__default['default'], {
+          children: /*#__PURE__*/react.cloneElement(props.hintIcon, {
+            // FIXME: add proper tone when tones are refactored
+            size: 'medium',
+            color: props.hintIcon.props.color || 'warning'
+          })
+        }), props.hint && jsxRuntime.jsx(Text__default['default'].Detail, {
+          tone: props.tone,
+          children: props.hint
+        })]
+      }), props.description && jsxRuntime.jsx(Text__default['default'].Wrap, {
+        children: jsxRuntime.jsx(Text__default['default'].Detail, {
+          tone: props.tone,
+          children: props.description
+        })
+      }), props.badge && jsxRuntime.jsx("div", {
+        css: _ref,
+        children: props.badge
+      })]
+    })
+  });
+};
+
+FieldLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _pt__default['default'].oneOfType([_pt__default['default'].string, _pt__default['default'].node]).isRequired,
+  hint: _pt__default['default'].oneOfType([_pt__default['default'].string, _pt__default['default'].node]),
+  description: _pt__default['default'].oneOfType([_pt__default['default'].string, _pt__default['default'].node]),
+  onInfoButtonClick: _pt__default['default'].func,
+  tone: _pt__default['default'].oneOf(['primary', 'inverted']),
+  hintIcon: _pt__default['default'].element,
+  badge: _pt__default['default'].node,
+  hasRequiredIndicator: _pt__default['default'].bool,
+  htmlFor: _pt__default['default'].string,
+  id: _pt__default['default'].string,
+  horizontalConstraint: _pt__default['default'].oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
+} : {};
+FieldLabel.displayName = 'FieldLabel';
+FieldLabel.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+var FieldLabel$1 = FieldLabel;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = FieldLabel$1;
+exports.version = version;

package/dist/commercetools-uikit-field-label.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-field-label.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-field-label.cjs.dev.js");
+}

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

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('prop-types');
+var react = require('react');
+require('@commercetools-uikit/utils');
+require('@emotion/react');
+var IconButton = require('@commercetools-uikit/icon-button');
+var icons = require('@commercetools-uikit/icons');
+var Text = require('@commercetools-uikit/text');
+var Constraints = require('@commercetools-uikit/constraints');
+var Stack = require('@commercetools-uikit/spacings-stack');
+var Inline = require('@commercetools-uikit/spacings-inline');
+var Label = require('@commercetools-uikit/label');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var Stack__default = /*#__PURE__*/_interopDefault(Stack);
+var Inline__default = /*#__PURE__*/_interopDefault(Inline);
+var Label__default = /*#__PURE__*/_interopDefault(Label);
+
+var _ref = {
+  name: "skgbeu",
+  styles: "display:flex;justify-content:flex-end"
+} ;
+
+var FieldLabel = function FieldLabel(props) {
+  if (props.hintIcon) ;
+
+  return jsxRuntime.jsx(Constraints__default['default'].Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxRuntime.jsxs(Stack__default['default'], {
+      scale: "xs",
+      children: [jsxRuntime.jsxs(Inline__default['default'], {
+        alignItems: "flexStart",
+        scale: "xs",
+        children: [jsxRuntime.jsx(Text__default['default'].Wrap, {
+          children: jsxRuntime.jsx(Label__default['default'], {
+            isBold: true,
+            isRequiredIndicatorVisible: props.hasRequiredIndicator,
+            tone: props.tone,
+            id: props.id,
+            htmlFor: props.htmlFor,
+            children: props.title
+          })
+        }), props.onInfoButtonClick && jsxRuntime.jsx(IconButton__default['default'], {
+          label: "More Info",
+          icon: jsxRuntime.jsx(icons.InformationIcon, {
+            size: "medium"
+          }),
+          size: "small",
+          onClick: props.onInfoButtonClick
+        })]
+      }), props.hint && jsxRuntime.jsxs(Inline__default['default'], {
+        alignItems: "flexStart",
+        scale: "xs",
+        children: [props.hintIcon && jsxRuntime.jsx(Inline__default['default'], {
+          children: /*#__PURE__*/react.cloneElement(props.hintIcon, {
+            // FIXME: add proper tone when tones are refactored
+            size: 'medium',
+            color: props.hintIcon.props.color || 'warning'
+          })
+        }), props.hint && jsxRuntime.jsx(Text__default['default'].Detail, {
+          tone: props.tone,
+          children: props.hint
+        })]
+      }), props.description && jsxRuntime.jsx(Text__default['default'].Wrap, {
+        children: jsxRuntime.jsx(Text__default['default'].Detail, {
+          tone: props.tone,
+          children: props.description
+        })
+      }), props.badge && jsxRuntime.jsx("div", {
+        css: _ref,
+        children: props.badge
+      })]
+    })
+  });
+};
+
+FieldLabel.propTypes = {};
+FieldLabel.displayName = 'FieldLabel';
+FieldLabel.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+var FieldLabel$1 = FieldLabel;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports['default'] = FieldLabel$1;
+exports.version = version;

package/dist/commercetools-uikit-field-label.esm.js

@@ -0,0 +1,104 @@
+import _pt from 'prop-types';
+import { cloneElement } from 'react';
+import { warning } from '@commercetools-uikit/utils';
+import '@emotion/react';
+import IconButton from '@commercetools-uikit/icon-button';
+import { InformationIcon } from '@commercetools-uikit/icons';
+import Text from '@commercetools-uikit/text';
+import Constraints from '@commercetools-uikit/constraints';
+import Stack from '@commercetools-uikit/spacings-stack';
+import Inline from '@commercetools-uikit/spacings-inline';
+import Label from '@commercetools-uikit/label';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "skgbeu",
+  styles: "display:flex;justify-content:flex-end"
+} : {
+  name: "pfzph7-FieldLabel",
+  styles: "display:flex;justify-content:flex-end;label:FieldLabel;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImZpZWxkLWxhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnSm9CIiwiZmlsZSI6ImZpZWxkLWxhYmVsLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIGNsb25lRWxlbWVudCxcbiAgTW91c2VFdmVudCxcbiAgS2V5Ym9hcmRFdmVudCxcbiAgUmVhY3RFbGVtZW50LFxuICBSZWFjdE5vZGUsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHdhcm5pbmcgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC91dGlscyc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgSWNvbkJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pY29uLWJ1dHRvbic7XG5pbXBvcnQgeyBJbmZvcm1hdGlvbkljb24gfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9pY29ucyc7XG5pbXBvcnQgVGV4dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC90ZXh0JztcbmltcG9ydCBDb25zdHJhaW50cyBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3RhY2sgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc3BhY2luZ3Mtc3RhY2snO1xuaW1wb3J0IElubGluZSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1pbmxpbmUnO1xuaW1wb3J0IExhYmVsIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2xhYmVsJztcblxuZXhwb3J0IHR5cGUgVEZpZWxkTGFiZWxQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRpdGxlIG9mIHRoZSBsYWJlbFxuICAgKi9cbiAgdGl0bGU6IHN0cmluZyB8IFJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIEhpbnQgZm9yIHRoZSBsYWJlbC4gUHJvdmlkZXMgYSBzdXBwbGVtZW50YXJ5IGJ1dCBpbXBvcnRhbnQgaW5mb3JtYXRpb24gcmVnYXJkaW5nIHRoZSBiZWhhdmlvdXIgb2YgdGhlIGlucHV0IChlLmcgd2FybiBhYm91dCB1bmlxdWVuZXNzIG9mIGEgZmllbGQsIHdoZW4gaXQgY2FuIG9ubHkgYmUgc2V0IG9uY2UpLCB3aGVyZWFzIGRlc2NyaXB0aW9uIGNhbiBkZXNjcmliZSBpdCBpbiBtb3JlIGRlcHRoLiBDYW4gYWxzbyByZWNlaXZlIGEgaGludEljb24uXG4gICAqL1xuICBoaW50Pzogc3RyaW5nIHwgUmVhY3ROb2RlO1xuICAvKipcbiAgICogUHJvdmlkZXMgYSBkZXNjcmlwdGlvbiBmb3IgdGhlIHRpdGxlLlxuICAgKi9cbiAgZGVzY3JpcHRpb24/OiBzdHJpbmcgfCBSZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBGdW5jdGlvbiBjYWxsZWQgd2hlbiBpbmZvIGJ1dHRvbiBpcyBwcmVzc2VkLiBJbmZvIGJ1dHRvbiB3aWxsIG9ubHkgYmUgdmlzaWJsZSB3aGVuIHRoaXMgcHJvcCBpcyBwYXNzZWQuXG4gICAqL1xuICBvbkluZm9CdXR0b25DbGljaz86IChcbiAgICBldmVudDogTW91c2VFdmVudDxIVE1MQnV0dG9uRWxlbWVudD4gfCBLZXlib2FyZEV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICApID0+IHZvaWQ7XG4gIC8qKlxuICAgKiBJbmRpY2F0ZXMgdGhlIHRvbmUgdG8gYmUgYXBwbGllZCB0byB0aGUgbGFiZWxcbiAgICovXG4gIHRvbmU/OiAncHJpbWFyeScgfCAnaW52ZXJ0ZWQnO1xuICAvKipcbiAgICogSWNvbiB0byBiZSBkaXNwbGF5ZWQgYmVzaWRlIHRoZSBoaW50IHRleHQuIFdpbGwgb25seSBnZXQgcmVuZGVyZWQgd2hlbiBoaW50IGlzIHBhc3NlZCBhcyB3ZWxsLlxuICAgKi9cbiAgaGludEljb24/OiBSZWFjdEVsZW1lbnQ7XG4gIC8qKlxuICAgKiBCYWRnZSB0byBiZSBkaXNwbGF5ZWQgYmVzaWRlIHRoZSBsYWJlbC4gTWlnaHQgYmUgdXNlZCB0byBkaXNwbGF5IGFkZGl0aW9uYWwgaW5mb3JtYXRpb24gYWJvdXQgdGhlIGNvbnRlbnQgb2YgdGhlIGZpZWxkIChFLmcgdmVyaWZpZWQgZW1haWwpXG4gICAqL1xuICBiYWRnZT86IFJlYWN0Tm9kZTtcbiAgLyoqXG4gICAqIEluZGljYXRlcyBpZiB0aGUgbGFiZWxlZCBmaWVsZCBpcyByZXF1aXJlZCBpbiBhIGZvcm1cbiAgICovXG4gIGhhc1JlcXVpcmVkSW5kaWNhdG9yPzogYm9vbGVhbjtcbiAgLyoqXG4gICAqIFRoZSBmb3IgSFRNTCBhdHRyaWJ1dGUsIHVzZWQgdG8gcmVmZXJlbmNlIGZvcm0gZWxlbWVudHMgd2l0aCB0aGUgcmVsYXRlZCBhdHRyaWJ1dGUgaWQgb3IgYXJpYS1sYWJlbGxlZGJ5LlxuICAgKi9cbiAgaHRtbEZvcj86IHN0cmluZztcbiAgLyoqXG4gICAqIFRoZSBpZCBIVE1MIGF0dHJpYnV0ZSwgdXNlZCB0byByZWZlcmVuY2Ugbm9uLWZvcm0gZWxlbWVudHMgd2l0aCB0aGUgcmVsYXRlZCBhdHRyaWJ1dGUgYXJpYS1sYWJlbGxlZGJ5LlxuICAgKi9cbiAgaWQ/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBIb3Jpem9udGFsIHNpemUgbGltaXQgb2YgdGhlIGxhYmVsLlxuICAgKi9cbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ/OlxuICAgIHwgM1xuICAgIHwgNFxuICAgIHwgNVxuICAgIHwgNlxuICAgIHwgN1xuICAgIHwgOFxuICAgIHwgOVxuICAgIHwgMTBcbiAgICB8IDExXG4gICAgfCAxMlxuICAgIHwgMTNcbiAgICB8IDE0XG4gICAgfCAxNVxuICAgIHwgMTZcbiAgICB8ICdzY2FsZSdcbiAgICB8ICdhdXRvJztcbn07XG5cbmNvbnN0IEZpZWxkTGFiZWwgPSAocHJvcHM6IFRGaWVsZExhYmVsUHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhpbnRJY29uKSB7XG4gICAgd2FybmluZyhcbiAgICAgIHByb3BzLmhpbnRJY29uLnByb3BzLnNpemUgPT09IHVuZGVmaW5lZCxcbiAgICAgICd1aS1raXQvRmllbGRMYWJlbDogc2V0dGluZyBgaGludEljb25gIHNpemUgaXMgbm90IHN1cHBvcnRlZC4nXG4gICAgKTtcblxuICAgIHdhcm5pbmcoXG4gICAgICBCb29sZWFuKHByb3BzLmhpbnQpLFxuICAgICAgJ3VpLWtpdC9GaWVsZExhYmVsOiBgaGludGAgaXMgcmVxdWlyZWQgd2hlbiBgaGludEljb25gIGlzIHByb3ZpZGVkJ1xuICAgICk7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxDb25zdHJhaW50cy5Ib3Jpem9udGFsIG1heD17cHJvcHMuaG9yaXpvbnRhbENvbnN0cmFpbnR9PlxuICAgICAgPFN0YWNrIHNjYWxlPVwieHNcIj5cbiAgICAgICAgPElubGluZSBhbGlnbkl0ZW1zPVwiZmxleFN0YXJ0XCIgc2NhbGU9XCJ4c1wiPlxuICAgICAgICAgIDxUZXh0LldyYXA+XG4gICAgICAgICAgICA8TGFiZWxcbiAgICAgICAgICAgICAgaXNCb2xkPXt0cnVlfVxuICAgICAgICAgICAgICBpc1JlcXVpcmVkSW5kaWNhdG9yVmlzaWJsZT17cHJvcHMuaGFzUmVxdWlyZWRJbmRpY2F0b3J9XG4gICAgICAgICAgICAgIHRvbmU9e3Byb3BzLnRvbmV9XG4gICAgICAgICAgICAgIGlkPXtwcm9wcy5pZH1cbiAgICAgICAgICAgICAgaHRtbEZvcj17cHJvcHMuaHRtbEZvcn1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge3Byb3BzLnRpdGxlfVxuICAgICAgICAgICAgPC9MYWJlbD5cbiAgICAgICAgICA8L1RleHQuV3JhcD5cbiAgICAgICAgICB7cHJvcHMub25JbmZvQnV0dG9uQ2xpY2sgJiYgKFxuICAgICAgICAgICAgPEljb25CdXR0b25cbiAgICAgICAgICAgICAgbGFiZWw9XCJNb3JlIEluZm9cIlxuICAgICAgICAgICAgICBpY29uPXs8SW5mb3JtYXRpb25JY29uIHNpemU9XCJtZWRpdW1cIiAvPn1cbiAgICAgICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICAgICAgb25DbGljaz17cHJvcHMub25JbmZvQnV0dG9uQ2xpY2t9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvSW5saW5lPlxuXG4gICAgICAgIHtwcm9wcy5oaW50ICYmIChcbiAgICAgICAgICA8SW5saW5lIGFsaWduSXRlbXM9XCJmbGV4U3RhcnRcIiBzY2FsZT1cInhzXCI+XG4gICAgICAgICAgICB7cHJvcHMuaGludEljb24gJiYgKFxuICAgICAgICAgICAgICA8SW5saW5lPlxuICAgICAgICAgICAgICAgIHtjbG9uZUVsZW1lbnQocHJvcHMuaGludEljb24sIHtcbiAgICAgICAgICAgICAgICAgIC8vIEZJWE1FOiBhZGQgcHJvcGVyIHRvbmUgd2hlbiB0b25lcyBhcmUgcmVmYWN0b3JlZFxuICAgICAgICAgICAgICAgICAgc2l6ZTogJ21lZGl1bScsXG4gICAgICAgICAgICAgICAgICBjb2xvcjogcHJvcHMuaGludEljb24ucHJvcHMuY29sb3IgfHwgJ3dhcm5pbmcnLFxuICAgICAgICAgICAgICAgIH0pfVxuICAgICAgICAgICAgICA8L0lubGluZT5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgICB7cHJvcHMuaGludCAmJiAoXG4gICAgICAgICAgICAgIDxUZXh0LkRldGFpbCB0b25lPXtwcm9wcy50b25lfT57cHJvcHMuaGludH08L1RleHQuRGV0YWlsPlxuICAgICAgICAgICAgKX1cbiAgICAgICAgICA8L0lubGluZT5cbiAgICAgICAgKX1cbiAgICAgICAge3Byb3BzLmRlc2NyaXB0aW9uICYmIChcbiAgICAgICAgICA8VGV4dC5XcmFwPlxuICAgICAgICAgICAgPFRleHQuRGV0YWlsIHRvbmU9e3Byb3BzLnRvbmV9Pntwcm9wcy5kZXNjcmlwdGlvbn08L1RleHQuRGV0YWlsPlxuICAgICAgICAgIDwvVGV4dC5XcmFwPlxuICAgICAgICApfVxuXG4gICAgICAgIHtwcm9wcy5iYWRnZSAmJiAoXG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICAgIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG4gICAgICAgICAgICBgfVxuICAgICAgICAgID5cbiAgICAgICAgICAgIHtwcm9wcy5iYWRnZX1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKX1cbiAgICAgIDwvU3RhY2s+XG4gICAgPC9Db25zdHJhaW50cy5Ib3Jpem9udGFsPlxuICApO1xufTtcblxuRmllbGRMYWJlbC5kaXNwbGF5TmFtZSA9ICdGaWVsZExhYmVsJztcbkZpZWxkTGFiZWwuZGVmYXVsdFByb3BzID0ge1xuICBob3Jpem9udGFsQ29uc3RyYWludDogJ3NjYWxlJyxcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEZpZWxkTGFiZWw7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var FieldLabel = function FieldLabel(props) {
+  if (props.hintIcon) {
+    process.env.NODE_ENV !== "production" ? warning(props.hintIcon.props.size === undefined, 'ui-kit/FieldLabel: setting `hintIcon` size is not supported.') : void 0;
+    process.env.NODE_ENV !== "production" ? warning(Boolean(props.hint), 'ui-kit/FieldLabel: `hint` is required when `hintIcon` is provided') : void 0;
+  }
+
+  return jsx(Constraints.Horizontal, {
+    max: props.horizontalConstraint,
+    children: jsxs(Stack, {
+      scale: "xs",
+      children: [jsxs(Inline, {
+        alignItems: "flexStart",
+        scale: "xs",
+        children: [jsx(Text.Wrap, {
+          children: jsx(Label, {
+            isBold: true,
+            isRequiredIndicatorVisible: props.hasRequiredIndicator,
+            tone: props.tone,
+            id: props.id,
+            htmlFor: props.htmlFor,
+            children: props.title
+          })
+        }), props.onInfoButtonClick && jsx(IconButton, {
+          label: "More Info",
+          icon: jsx(InformationIcon, {
+            size: "medium"
+          }),
+          size: "small",
+          onClick: props.onInfoButtonClick
+        })]
+      }), props.hint && jsxs(Inline, {
+        alignItems: "flexStart",
+        scale: "xs",
+        children: [props.hintIcon && jsx(Inline, {
+          children: /*#__PURE__*/cloneElement(props.hintIcon, {
+            // FIXME: add proper tone when tones are refactored
+            size: 'medium',
+            color: props.hintIcon.props.color || 'warning'
+          })
+        }), props.hint && jsx(Text.Detail, {
+          tone: props.tone,
+          children: props.hint
+        })]
+      }), props.description && jsx(Text.Wrap, {
+        children: jsx(Text.Detail, {
+          tone: props.tone,
+          children: props.description
+        })
+      }), props.badge && jsx("div", {
+        css: _ref,
+        children: props.badge
+      })]
+    })
+  });
+};
+
+FieldLabel.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _pt.oneOfType([_pt.string, _pt.node]).isRequired,
+  hint: _pt.oneOfType([_pt.string, _pt.node]),
+  description: _pt.oneOfType([_pt.string, _pt.node]),
+  onInfoButtonClick: _pt.func,
+  tone: _pt.oneOf(['primary', 'inverted']),
+  hintIcon: _pt.element,
+  badge: _pt.node,
+  hasRequiredIndicator: _pt.bool,
+  htmlFor: _pt.string,
+  id: _pt.string,
+  horizontalConstraint: _pt.oneOf([3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'])
+} : {};
+FieldLabel.displayName = 'FieldLabel';
+FieldLabel.defaultProps = {
+  horizontalConstraint: 'scale'
+};
+var FieldLabel$1 = FieldLabel;
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+export { FieldLabel$1 as default, version };

package/dist/declarations/src/export-types.d.ts

@@ -0,0 +1,2 @@
+import type { TFieldLabelProps as FieldLabelProps } from './field-label';
+export declare type TFieldLabelProps = FieldLabelProps;

package/dist/declarations/src/field-label.d.ts

@@ -0,0 +1,22 @@
+import { MouseEvent, KeyboardEvent, ReactElement, ReactNode } from 'react';
+export declare type TFieldLabelProps = {
+    title: string | ReactNode;
+    hint?: string | ReactNode;
+    description?: string | ReactNode;
+    onInfoButtonClick?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+    tone?: 'primary' | 'inverted';
+    hintIcon?: ReactElement;
+    badge?: ReactNode;
+    hasRequiredIndicator?: boolean;
+    htmlFor?: string;
+    id?: string;
+    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+};
+declare const FieldLabel: {
+    (props: TFieldLabelProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: {
+        horizontalConstraint: string;
+    };
+};
+export default FieldLabel;

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './field-label';
+export { default as version } from './version';
+export * from './export-types';

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "0.0.0-canary-2021830134526";
+export default _default;

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@commercetools-uikit/field-label",
+  "description": "The FieldLabel component represents the label for a field in a form.",
+  "version": "0.0.0-canary-2021830134526",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/field-label"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "design system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-field-label.cjs.js",
+  "module": "dist/commercetools-uikit-field-label.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepare": "../../../scripts/version.js replace"
+  },
+  "dependencies": {
+    "@babel/runtime": "7.14.8",
+    "@babel/runtime-corejs3": "7.14.9",
+    "@commercetools-uikit/constraints": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/icon-button": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/icons": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/label": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/spacings-inline": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/spacings-stack": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/text": "0.0.0-canary-2021830134526",
+    "@commercetools-uikit/utils": "12.2.0",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "prop-types": "15.7.2",
+    "react-required-if": "1.0.3"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}