@atlaskit/form 8.4.8 → 8.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/form
 
+## 8.5.0
+
+### Minor Changes
+
+- [`c987bb60a89`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c987bb60a89) - Exposes an additional Label component in `@atlaskit/form` - this component is designed to be wrapped by the Field component but there are certain use cases that require a Label on its own. This is to fulfill those use cases.
+
+### Patch Changes
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+
 ## 8.4.8
 
 ### Patch Changes

package/Label/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/form/Label",
+  "main": "../dist/cjs/entry-points/label.js",
+  "module": "../dist/esm/entry-points/label.js",
+  "module:es2019": "../dist/es2019/entry-points/label.js",
+  "types": "../dist/types/entry-points/label.d.ts"
+}

package/dist/cjs/entry-points/label.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function get() {
+    return _label.default;
+  }
+});
+
+var _label = _interopRequireDefault(require("../label"));

package/dist/cjs/field.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,7 +14,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _core = require("@emotion/core");
 
@@ -26,17 +24,11 @@ var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
 
-var _typography = require("@atlaskit/theme/typography");
-
 var _form = require("./form");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _label = _interopRequireDefault(require("./label"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -45,45 +37,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)();
 var fieldWrapperStyles = (0, _core.css)({
-  marginTop: "".concat(gridSize, "px")
-});
-var labelStyles = (0, _core.css)({
-  display: 'inline-block',
-  marginTop: 0,
-  marginBottom: "".concat(gridSize * 0.5, "px"),
-  fontFamily: "".concat(fontFamily)
+  marginTop: gridSize
 });
 var requiredIndicatorStyles = (0, _core.css)({
-  paddingLeft: "".concat(gridSize * 0.25, "px"),
-  color: "".concat("var(--ds-text-danger, ".concat(_colors.R400, ")")),
-  fontFamily: "".concat(fontFamily)
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var lightH200Styles = (0, _core.css)((0, _typography.h200)({
-  theme: {
-    mode: 'light'
-  }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var darkH200Styles = (0, _core.css)((0, _typography.h200)({
-  theme: {
-    mode: 'dark'
-  }
-}));
-
-var Label = function Label(_ref) {
-  var children = _ref.children,
-      fieldId = _ref.fieldId;
-
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
-  return (0, _core.jsx)("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
-    id: "".concat(fieldId, "-label"),
-    htmlFor: fieldId
-  }, children);
-};
+  paddingLeft: "".concat(gridSize / 4, "px"),
+  color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
+  fontFamily: fontFamily
+});
 
 function isEvent(event) {
   return Boolean(event && event.target);
@@ -98,8 +58,7 @@ function isFunction(x) {
  *
  * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
  */
-var FieldId = /*#__PURE__*/_react.default.createContext(undefined);
-
+var FieldId = /*#__PURE__*/(0, _react.createContext)(undefined);
 exports.FieldId = FieldId;
 
 function usePreviousRef(current) {
@@ -309,8 +268,9 @@ function Field(props) {
 
   return (0, _core.jsx)("div", {
     css: fieldWrapperStyles
-  }, props.label && (0, _core.jsx)(Label, {
-    fieldId: fieldId
+  }, props.label && (0, _core.jsx)(_label.default, {
+    htmlFor: fieldId,
+    id: "".concat(fieldId, "-label")
   }, props.label, props.isRequired && (0, _core.jsx)("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"

package/dist/cjs/form-header.js

@@ -100,7 +100,7 @@ var FormHeader = function FormHeader(_ref5) {
   var children = _ref5.children,
       description = _ref5.description,
       title = _ref5.title;
-  return (0, _core.jsx)(FormHeaderWrapper, null, title && (0, _core.jsx)(FormHeaderTitle, null, title), description && (0, _core.jsx)(FormHeaderDescription, null, description), (0, _core.jsx)(FormHeaderContent, null, children));
+  return (0, _core.jsx)(FormHeaderWrapper, null, title && (0, _core.jsx)(FormHeaderTitle, null, title), description && (0, _core.jsx)(FormHeaderDescription, null, description), children && (0, _core.jsx)(FormHeaderContent, null, children));
 };
 
 var _default = FormHeader;

package/dist/cjs/index.js

@@ -53,6 +53,12 @@ Object.defineProperty(exports, "HelperMessage", {
     return _messages.HelperMessage;
   }
 });
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function get() {
+    return _label.default;
+  }
+});
 Object.defineProperty(exports, "RangeField", {
   enumerable: true,
   get: function get() {
@@ -86,6 +92,8 @@ var _checkboxField = _interopRequireDefault(require("./checkbox-field"));
 
 var _rangeField = _interopRequireDefault(require("./range-field"));
 
+var _label = _interopRequireDefault(require("./label"));
+
 var _messages = require("./messages");
 
 var _fieldset = _interopRequireDefault(require("./fieldset"));

package/dist/cjs/label.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _typography = require("@atlaskit/theme/typography");
+
+/** @jsx jsx */
+var fontFamily = (0, _constants.fontFamily)();
+var gridSize = (0, _constants.gridSize)();
+var labelStyles = (0, _core.css)({
+  display: 'inline-block',
+  marginTop: 0,
+  marginBottom: gridSize / 2,
+  fontFamily: fontFamily
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH200Styles = (0, _core.css)((0, _typography.h200)({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = (0, _core.css)((0, _typography.h200)({
+  theme: {
+    mode: 'dark'
+  }
+}));
+/**
+ * __Label__
+ *
+ * A label represents a caption for an item in a user interface.
+ *
+ * It's recommended that a label has a `4px` spacing above its associated
+ * control element.
+ */
+
+var Label = function Label(_ref) {
+  var children = _ref.children,
+      htmlFor = _ref.htmlFor,
+      id = _ref.id;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  return (0, _core.jsx)("label", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
+    id: id,
+    htmlFor: htmlFor
+  }, children);
+};
+
+var _default = Label;
+exports.default = _default;

package/dist/cjs/range-field.js

@@ -38,18 +38,22 @@ var RangeField = function RangeField(props) {
   var children = props.children,
       strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded); // isInvalid and isRequired are specifically invalid for range inputs
 
-  return /*#__PURE__*/_react.default.createElement(_field.default, (0, _extends2.default)({}, strippedProps, {
-    transform: Number
-  }), function (_ref) {
-    var _ref$fieldProps = _ref.fieldProps,
-        isInvalid = _ref$fieldProps.isInvalid,
-        isRequired = _ref$fieldProps.isRequired,
-        fieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
-        rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
-    return children(_objectSpread({
-      fieldProps: fieldProps
-    }, rest));
-  });
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    _react.default.createElement(_field.default, (0, _extends2.default)({}, strippedProps, {
+      transform: Number
+    }), function (_ref) {
+      var _ref$fieldProps = _ref.fieldProps,
+          isInvalid = _ref$fieldProps.isInvalid,
+          isRequired = _ref$fieldProps.isRequired,
+          fieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
+          rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
+      return children(_objectSpread({
+        fieldProps: fieldProps
+      }, rest));
+    })
+  );
 };
 
 var _default = RangeField;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.4.8",
+	"version": "8.5.0",
 	"sideEffects": false
 }

package/dist/es2019/entry-points/label.js

@@ -0,0 +1 @@
+export { default as Label } from '../label';

package/dist/es2019/field.js

@@ -1,55 +1,22 @@
 /** @jsx jsx */
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { R400 } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { h200 } from '@atlaskit/theme/typography';
 import { FormContext, IsDisabledContext } from './form';
+import Label from './label';
 const gridSize = getGridSize();
 const fontFamily = getFontFamily();
 const fieldWrapperStyles = css({
-  marginTop: `${gridSize}px`
-});
-const labelStyles = css({
-  display: 'inline-block',
-  marginTop: 0,
-  marginBottom: `${gridSize * 0.5}px`,
-  fontFamily: `${fontFamily}`
+  marginTop: gridSize
 });
 const requiredIndicatorStyles = css({
-  paddingLeft: `${gridSize * 0.25}px`,
-  color: `${`var(--ds-text-danger, ${R400})`}`,
-  fontFamily: `${fontFamily}`
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-const lightH200Styles = css(h200({
-  theme: {
-    mode: 'light'
-  }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-const darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
-
-const Label = ({
-  children,
-  fieldId
-}) => {
-  const {
-    mode
-  } = useGlobalTheme();
-  return jsx("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
-    id: `${fieldId}-label`,
-    htmlFor: fieldId
-  }, children);
-};
+  paddingLeft: `${gridSize / 4}px`,
+  color: `var(--ds-text-danger, ${R400})`,
+  fontFamily
+});
 
 function isEvent(event) {
   return Boolean(event && event.target);
@@ -64,7 +31,7 @@ function isFunction(x) {
  *
  * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
  */
-export const FieldId = /*#__PURE__*/React.createContext(undefined);
+export const FieldId = /*#__PURE__*/createContext(undefined);
 
 function usePreviousRef(current) {
   const ref = useRef(current); // will be updated on the next render
@@ -264,7 +231,8 @@ export default function Field(props) {
   return jsx("div", {
     css: fieldWrapperStyles
   }, props.label && jsx(Label, {
-    fieldId: fieldId
+    htmlFor: fieldId,
+    id: `${fieldId}-label`
   }, props.label, props.isRequired && jsx("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"

package/dist/es2019/form-header.js

@@ -87,7 +87,7 @@ const FormHeader = ({
   description,
   title
 }) => {
-  return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), jsx(FormHeaderContent, null, children));
+  return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children));
 };
 
 export default FormHeader;

package/dist/es2019/index.js

@@ -5,5 +5,6 @@ export { default as FormSection } from './form-section';
 export { default as Field } from './field';
 export { default as CheckboxField } from './checkbox-field';
 export { default as RangeField } from './range-field';
+export { default as Label } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset'; // eslint-disable-next-line import/no-unresolved

package/dist/es2019/label.js

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h200 } from '@atlaskit/theme/typography';
+const fontFamily = getFontFamily();
+const gridSize = getGridSize();
+const labelStyles = css({
+  display: 'inline-block',
+  marginTop: 0,
+  marginBottom: gridSize / 2,
+  fontFamily: fontFamily
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const lightH200Styles = css(h200({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const darkH200Styles = css(h200({
+  theme: {
+    mode: 'dark'
+  }
+}));
+/**
+ * __Label__
+ *
+ * A label represents a caption for an item in a user interface.
+ *
+ * It's recommended that a label has a `4px` spacing above its associated
+ * control element.
+ */
+
+const Label = ({
+  children,
+  htmlFor,
+  id
+}) => {
+  const {
+    mode
+  } = useGlobalTheme();
+  return jsx("label", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
+    id: id,
+    htmlFor: htmlFor
+  }, children);
+};
+
+export default Label;

package/dist/es2019/range-field.js

@@ -17,19 +17,23 @@ const RangeField = props => {
     ...strippedProps
   } = props; // isInvalid and isRequired are specifically invalid for range inputs
 
-  return /*#__PURE__*/React.createElement(Field, _extends({}, strippedProps, {
-    transform: Number
-  }), ({
-    fieldProps: {
-      isInvalid,
-      isRequired,
-      ...fieldProps
-    },
-    ...rest
-  }) => children({
-    fieldProps,
-    ...rest
-  }));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    React.createElement(Field, _extends({}, strippedProps, {
+      transform: Number
+    }), ({
+      fieldProps: {
+        isInvalid,
+        isRequired,
+        ...fieldProps
+      },
+      ...rest
+    }) => children({
+      fieldProps,
+      ...rest
+    }))
+  );
 };
 
 export default RangeField;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.4.8",
+	"version": "8.5.0",
 	"sideEffects": false
 }

package/dist/esm/entry-points/label.js

@@ -0,0 +1 @@
+export { default as Label } from '../label';

package/dist/esm/field.js

@@ -7,57 +7,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { R400 } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
-import { h200 } from '@atlaskit/theme/typography';
 import { FormContext, IsDisabledContext } from './form';
+import Label from './label';
 var gridSize = getGridSize();
 var fontFamily = getFontFamily();
 var fieldWrapperStyles = css({
-  marginTop: "".concat(gridSize, "px")
-});
-var labelStyles = css({
-  display: 'inline-block',
-  marginTop: 0,
-  marginBottom: "".concat(gridSize * 0.5, "px"),
-  fontFamily: "".concat(fontFamily)
+  marginTop: gridSize
 });
 var requiredIndicatorStyles = css({
-  paddingLeft: "".concat(gridSize * 0.25, "px"),
-  color: "".concat("var(--ds-text-danger, ".concat(R400, ")")),
-  fontFamily: "".concat(fontFamily)
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var lightH200Styles = css(h200({
-  theme: {
-    mode: 'light'
-  }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
-
-var Label = function Label(_ref) {
-  var children = _ref.children,
-      fieldId = _ref.fieldId;
-
-  var _useGlobalTheme = useGlobalTheme(),
-      mode = _useGlobalTheme.mode;
-
-  return jsx("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
-    id: "".concat(fieldId, "-label"),
-    htmlFor: fieldId
-  }, children);
-};
+  paddingLeft: "".concat(gridSize / 4, "px"),
+  color: "var(--ds-text-danger, ".concat(R400, ")"),
+  fontFamily: fontFamily
+});
 
 function isEvent(event) {
   return Boolean(event && event.target);
@@ -72,7 +39,7 @@ function isFunction(x) {
  *
  * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
  */
-export var FieldId = /*#__PURE__*/React.createContext(undefined);
+export var FieldId = /*#__PURE__*/createContext(undefined);
 
 function usePreviousRef(current) {
   var ref = useRef(current); // will be updated on the next render
@@ -282,7 +249,8 @@ export default function Field(props) {
   return jsx("div", {
     css: fieldWrapperStyles
   }, props.label && jsx(Label, {
-    fieldId: fieldId
+    htmlFor: fieldId,
+    id: "".concat(fieldId, "-label")
   }, props.label, props.isRequired && jsx("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"

package/dist/esm/form-header.js

@@ -83,7 +83,7 @@ var FormHeader = function FormHeader(_ref5) {
   var children = _ref5.children,
       description = _ref5.description,
       title = _ref5.title;
-  return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), jsx(FormHeaderContent, null, children));
+  return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), children && jsx(FormHeaderContent, null, children));
 };
 
 export default FormHeader;

package/dist/esm/index.js

@@ -5,5 +5,6 @@ export { default as FormSection } from './form-section';
 export { default as Field } from './field';
 export { default as CheckboxField } from './checkbox-field';
 export { default as RangeField } from './range-field';
+export { default as Label } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset'; // eslint-disable-next-line import/no-unresolved

package/dist/esm/label.js

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h200 } from '@atlaskit/theme/typography';
+var fontFamily = getFontFamily();
+var gridSize = getGridSize();
+var labelStyles = css({
+  display: 'inline-block',
+  marginTop: 0,
+  marginBottom: gridSize / 2,
+  fontFamily: fontFamily
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH200Styles = css(h200({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = css(h200({
+  theme: {
+    mode: 'dark'
+  }
+}));
+/**
+ * __Label__
+ *
+ * A label represents a caption for an item in a user interface.
+ *
+ * It's recommended that a label has a `4px` spacing above its associated
+ * control element.
+ */
+
+var Label = function Label(_ref) {
+  var children = _ref.children,
+      htmlFor = _ref.htmlFor,
+      id = _ref.id;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  return jsx("label", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
+    id: id,
+    htmlFor: htmlFor
+  }, children);
+};
+
+export default Label;

package/dist/esm/range-field.js

@@ -26,19 +26,23 @@ var RangeField = function RangeField(props) {
       strippedProps = _objectWithoutProperties(props, _excluded); // isInvalid and isRequired are specifically invalid for range inputs
 
 
-  return /*#__PURE__*/React.createElement(Field, _extends({}, strippedProps, {
-    transform: Number
-  }), function (_ref) {
-    var _ref$fieldProps = _ref.fieldProps,
-        isInvalid = _ref$fieldProps.isInvalid,
-        isRequired = _ref$fieldProps.isRequired,
-        fieldProps = _objectWithoutProperties(_ref$fieldProps, _excluded2),
-        rest = _objectWithoutProperties(_ref, _excluded3);
-
-    return children(_objectSpread({
-      fieldProps: fieldProps
-    }, rest));
-  });
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    React.createElement(Field, _extends({}, strippedProps, {
+      transform: Number
+    }), function (_ref) {
+      var _ref$fieldProps = _ref.fieldProps,
+          isInvalid = _ref$fieldProps.isInvalid,
+          isRequired = _ref$fieldProps.isRequired,
+          fieldProps = _objectWithoutProperties(_ref$fieldProps, _excluded2),
+          rest = _objectWithoutProperties(_ref, _excluded3);
+
+      return children(_objectSpread({
+        fieldProps: fieldProps
+      }, rest));
+    })
+  );
 };
 
 export default RangeField;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.4.8",
+	"version": "8.5.0",
 	"sideEffects": false
 }

package/dist/types/entry-points/label.d.ts

@@ -0,0 +1,2 @@
+export { default as Label } from '../label';
+export type { LabelProps } from '../label';

package/dist/types/field.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { FormEvent, ReactNode } from 'react';
+import { FormEvent, ReactNode } from 'react';
 declare type SupportedElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {
     id: string;
@@ -34,7 +34,7 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
         error?: string;
         valid: boolean;
         meta: Meta;
-    }) => React.ReactNode;
+    }) => ReactNode;
     /**
      * Sets the default value of the field. If a function is provided, it is called with the current default value of the field.
      */
@@ -73,6 +73,6 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
  *
  * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
  */
-export declare const FieldId: React.Context<string | undefined>;
+export declare const FieldId: import("react").Context<string | undefined>;
 export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): JSX.Element;
 export {};

package/dist/types/index.d.ts

@@ -9,6 +9,8 @@ export { default as CheckboxField } from './checkbox-field';
 export type { CheckboxFieldProps } from './checkbox-field';
 export { default as RangeField } from './range-field';
 export type { RangeFieldProps } from './range-field';
+export { default as Label } from './label';
+export type { LabelProps } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
 export type { OnSubmitHandler, FormApi } from './types';

package/dist/types/label.d.ts

@@ -0,0 +1,16 @@
+/** @jsx jsx */
+import { FC } from 'react';
+export interface LabelProps {
+    id?: string;
+    htmlFor: string;
+}
+/**
+ * __Label__
+ *
+ * A label represents a caption for an item in a user interface.
+ *
+ * It's recommended that a label has a `4px` spacing above its associated
+ * control element.
+ */
+declare const Label: FC<LabelProps>;
+export default Label;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.4.8",
+  "version": "8.5.0",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,6 +25,7 @@
     "./Form": "./src/entry-points/form.tsx",
     "./Messages": "./src/entry-points/messages.tsx",
     "./RangeField": "./src/entry-points/range-field.tsx",
+    "./Label": "./src/entry-points/label.tsx",
     ".": "./src/index.tsx"
   },
   "atlassian": {
@@ -56,15 +57,15 @@
     "@atlaskit/checkbox": "^12.3.0",
     "@atlaskit/datetime-picker": "^11.1.0",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/dropdown-menu": "^11.0.0",
+    "@atlaskit/dropdown-menu": "^11.1.0",
     "@atlaskit/droplist": "^11.0.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/radio": "^5.3.0",
-    "@atlaskit/range": "^5.1.0",
+    "@atlaskit/range": "^6.0.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.2.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textarea": "^4.2.0",
+    "@atlaskit/textarea": "^4.3.0",
     "@atlaskit/textfield": "^5.1.0",
     "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/tooltip": "^17.5.0",