@atlaskit/form 8.4.5 → 8.5.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @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
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump dependency tiny-invariant to latest"
+- Updated dependencies
+
+## 8.4.7
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.4.6
+
+### Patch Changes
+
+- [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
+
 ## 8.4.5
 
 ### 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/checkbox-field.js

@@ -21,13 +21,19 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _field = _interopRequireDefault(require("./field"));
 
+var _excluded = ["children", "defaultIsChecked", "value"],
+    _excluded2 = ["value"],
+    _excluded3 = ["fieldProps"],
+    _excluded4 = ["value"],
+    _excluded5 = ["fieldProps"];
+
 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 || _typeof(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; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { (0, _defineProperty2.default)(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; }
 
 /**
  * __Checkbox field__
@@ -43,7 +49,7 @@ var CheckboxField = function CheckboxField(props) {
       _props$defaultIsCheck = props.defaultIsChecked,
       defaultIsChecked = _props$defaultIsCheck === void 0 ? false : _props$defaultIsCheck,
       value = props.value,
-      rest = (0, _objectWithoutProperties2.default)(props, ["children", "defaultIsChecked", "value"]); // Maintains a memoised list of the default values
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded); // Maintains a memoised list of the default values
 
   var defaultValue = (0, _react.useCallback)(function () {
     var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -59,8 +65,8 @@ var CheckboxField = function CheckboxField(props) {
   }), function (_ref) {
     var _ref$fieldProps = _ref.fieldProps,
         fieldValue = _ref$fieldProps.value,
-        otherFieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, ["value"]),
-        others = (0, _objectWithoutProperties2.default)(_ref, ["fieldProps"]);
+        otherFieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
+        others = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
         isChecked: !!fieldValue.find(function (v) {
@@ -77,8 +83,8 @@ var CheckboxField = function CheckboxField(props) {
   }), function (_ref2) {
     var _ref2$fieldProps = _ref2.fieldProps,
         fieldValue = _ref2$fieldProps.value,
-        otherFieldProps = (0, _objectWithoutProperties2.default)(_ref2$fieldProps, ["value"]),
-        others = (0, _objectWithoutProperties2.default)(_ref2, ["fieldProps"]);
+        otherFieldProps = (0, _objectWithoutProperties2.default)(_ref2$fieldProps, _excluded4),
+        others = (0, _objectWithoutProperties2.default)(_ref2, _excluded5);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
         isChecked: fieldValue,

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/entry-points/messages.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "HelperMessage", {
+Object.defineProperty(exports, "ErrorMessage", {
   enumerable: true,
   get: function get() {
-    return _messages.HelperMessage;
+    return _messages.ErrorMessage;
   }
 });
-Object.defineProperty(exports, "ErrorMessage", {
+Object.defineProperty(exports, "HelperMessage", {
   enumerable: true,
   get: function get() {
-    return _messages.ErrorMessage;
+    return _messages.HelperMessage;
   }
 });
 Object.defineProperty(exports, "ValidMessage", {

package/dist/cjs/field.js

@@ -2,13 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Field;
 exports.FieldId = void 0;
+exports.default = Field;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -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,64 +24,26 @@ 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { (0, _defineProperty2.default)(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; }
 
 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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FormHeaderTitle = exports.FormHeaderDescription = exports.FormHeaderContent = exports.default = void 0;
+exports.default = exports.FormHeaderTitle = exports.FormHeaderDescription = exports.FormHeaderContent = void 0;
 
 var _core = require("@emotion/core");
 
@@ -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/form.js

@@ -7,8 +7,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Form;
 exports.IsDisabledContext = exports.FormContext = void 0;
+exports.default = Form;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

package/dist/cjs/index.js

@@ -5,46 +5,46 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "CheckboxField", {
   enumerable: true,
   get: function get() {
-    return _form.default;
+    return _checkboxField.default;
   }
 });
-Object.defineProperty(exports, "FormHeader", {
+Object.defineProperty(exports, "ErrorMessage", {
   enumerable: true,
   get: function get() {
-    return _formHeader.default;
+    return _messages.ErrorMessage;
   }
 });
-Object.defineProperty(exports, "FormFooter", {
+Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function get() {
-    return _formFooter.default;
+    return _field.default;
   }
 });
-Object.defineProperty(exports, "FormSection", {
+Object.defineProperty(exports, "Fieldset", {
   enumerable: true,
   get: function get() {
-    return _formSection.default;
+    return _fieldset.default;
   }
 });
-Object.defineProperty(exports, "Field", {
+Object.defineProperty(exports, "FormFooter", {
   enumerable: true,
   get: function get() {
-    return _field.default;
+    return _formFooter.default;
   }
 });
-Object.defineProperty(exports, "CheckboxField", {
+Object.defineProperty(exports, "FormHeader", {
   enumerable: true,
   get: function get() {
-    return _checkboxField.default;
+    return _formHeader.default;
   }
 });
-Object.defineProperty(exports, "RangeField", {
+Object.defineProperty(exports, "FormSection", {
   enumerable: true,
   get: function get() {
-    return _rangeField.default;
+    return _formSection.default;
   }
 });
 Object.defineProperty(exports, "HelperMessage", {
@@ -53,10 +53,16 @@ Object.defineProperty(exports, "HelperMessage", {
     return _messages.HelperMessage;
   }
 });
-Object.defineProperty(exports, "ErrorMessage", {
+Object.defineProperty(exports, "Label", {
   enumerable: true,
   get: function get() {
-    return _messages.ErrorMessage;
+    return _label.default;
+  }
+});
+Object.defineProperty(exports, "RangeField", {
+  enumerable: true,
+  get: function get() {
+    return _rangeField.default;
   }
 });
 Object.defineProperty(exports, "ValidMessage", {
@@ -65,10 +71,10 @@ Object.defineProperty(exports, "ValidMessage", {
     return _messages.ValidMessage;
   }
 });
-Object.defineProperty(exports, "Fieldset", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _fieldset.default;
+    return _form.default;
   }
 });
 
@@ -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/messages.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValidMessage = exports.ErrorMessage = exports.HelperMessage = void 0;
+exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -44,7 +44,7 @@ var messageErrorColorStyles = (0, _core.css)({
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")")
 });
 var messageNeutralColorStyles = (0, _core.css)({
-  color: "var(--ds-text-lowEmphasis, ".concat(_colors.N200, ")")
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
 });
 var messageValidColorStyles = (0, _core.css)({
   color: "var(--ds-text-success, ".concat(_colors.G400, ")")

package/dist/cjs/range-field.js

@@ -17,9 +17,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _field = _interopRequireDefault(require("./field"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["children"],
+    _excluded2 = ["isInvalid", "isRequired"],
+    _excluded3 = ["fieldProps"];
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
+
+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) { (0, _defineProperty2.default)(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; }
 
 /**
  * __Range field__
@@ -32,20 +36,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var RangeField = function RangeField(props) {
   var children = props.children,
-      strippedProps = (0, _objectWithoutProperties2.default)(props, ["children"]); // 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, ["isInvalid", "isRequired"]),
-        rest = (0, _objectWithoutProperties2.default)(_ref, ["fieldProps"]);
-    return children(_objectSpread({
-      fieldProps: fieldProps
-    }, rest));
-  });
+      strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded); // isInvalid and isRequired are specifically invalid for range inputs
+
+  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.5",
+	"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/messages.js

@@ -26,7 +26,7 @@ const messageErrorColorStyles = css({
   color: `var(--ds-text-danger, ${R400})`
 });
 const messageNeutralColorStyles = css({
-  color: `var(--ds-text-lowEmphasis, ${N200})`
+  color: `var(--ds-text-subtlest, ${N200})`
 });
 const messageValidColorStyles = css({
   color: `var(--ds-text-success, ${G400})`

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.5",
+	"version": "8.5.0",
 	"sideEffects": false
 }

package/dist/esm/checkbox-field.js

@@ -2,10 +2,15 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "defaultIsChecked", "value"],
+    _excluded2 = ["value"],
+    _excluded3 = ["fieldProps"],
+    _excluded4 = ["value"],
+    _excluded5 = ["fieldProps"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 import React, { useCallback } from 'react';
 import Field from './field';
@@ -24,7 +29,7 @@ var CheckboxField = function CheckboxField(props) {
       _props$defaultIsCheck = props.defaultIsChecked,
       defaultIsChecked = _props$defaultIsCheck === void 0 ? false : _props$defaultIsCheck,
       value = props.value,
-      rest = _objectWithoutProperties(props, ["children", "defaultIsChecked", "value"]); // Maintains a memoised list of the default values
+      rest = _objectWithoutProperties(props, _excluded); // Maintains a memoised list of the default values
 
 
   var defaultValue = useCallback(function () {
@@ -41,8 +46,8 @@ var CheckboxField = function CheckboxField(props) {
   }), function (_ref) {
     var _ref$fieldProps = _ref.fieldProps,
         fieldValue = _ref$fieldProps.value,
-        otherFieldProps = _objectWithoutProperties(_ref$fieldProps, ["value"]),
-        others = _objectWithoutProperties(_ref, ["fieldProps"]);
+        otherFieldProps = _objectWithoutProperties(_ref$fieldProps, _excluded2),
+        others = _objectWithoutProperties(_ref, _excluded3);
 
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
@@ -60,8 +65,8 @@ var CheckboxField = function CheckboxField(props) {
   }), function (_ref2) {
     var _ref2$fieldProps = _ref2.fieldProps,
         fieldValue = _ref2$fieldProps.value,
-        otherFieldProps = _objectWithoutProperties(_ref2$fieldProps, ["value"]),
-        others = _objectWithoutProperties(_ref2, ["fieldProps"]);
+        otherFieldProps = _objectWithoutProperties(_ref2$fieldProps, _excluded4),
+        others = _objectWithoutProperties(_ref2, _excluded5);
 
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {

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

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

package/dist/esm/field.js

@@ -2,62 +2,29 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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/messages.js

@@ -26,7 +26,7 @@ var messageErrorColorStyles = css({
   color: "var(--ds-text-danger, ".concat(R400, ")")
 });
 var messageNeutralColorStyles = css({
-  color: "var(--ds-text-lowEmphasis, ".concat(N200, ")")
+  color: "var(--ds-text-subtlest, ".concat(N200, ")")
 });
 var messageValidColorStyles = css({
   color: "var(--ds-text-success, ".concat(G400, ")")

package/dist/esm/range-field.js

@@ -1,10 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"],
+    _excluded2 = ["isInvalid", "isRequired"],
+    _excluded3 = ["fieldProps"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 import React from 'react';
 import Field from './field';
@@ -20,22 +23,26 @@ import Field from './field';
  */
 var RangeField = function RangeField(props) {
   var children = props.children,
-      strippedProps = _objectWithoutProperties(props, ["children"]); // 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, ["isInvalid", "isRequired"]),
-        rest = _objectWithoutProperties(_ref, ["fieldProps"]);
-
-    return children(_objectSpread({
-      fieldProps: fieldProps
-    }, rest));
-  });
+      strippedProps = _objectWithoutProperties(props, _excluded); // isInvalid and isRequired are specifically invalid for range inputs
+
+
+  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.5",
+	"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.5",
+  "version": "8.5.0",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,11 +25,11 @@
     "./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": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Form"
@@ -37,38 +37,37 @@
   },
   "homepage": "https://atlassian.design/components/form/",
   "dependencies": {
-    "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.4.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "final-form": "^4.20.1",
     "final-form-focus": "^1.1.2",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "react-uid": "^2.2.0",
-    "tiny-invariant": "^0.0.3"
+    "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/calendar": "^12.1.0",
     "@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.3.0",
+    "@atlaskit/toggle": "^12.4.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",