@atlaskit/form 8.5.9 → 8.7.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/form
 
+## 8.7.0
+
+### Minor Changes
+
+- [`500a96aa7de`](https://bitbucket.org/atlassian/atlassian-frontend/commits/500a96aa7de) - Add elementAfterLabel prop to form Field.
+
+### Patch Changes
+
+- [`001c650e983`](https://bitbucket.org/atlassian/atlassian-frontend/commits/001c650e983) - Add ds-lib devDependency. No behaviour change.
+
+## 8.6.0
+
+### Minor Changes
+
+- [`ae87a1a6d39`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ae87a1a6d39) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.5.9
 
 ### Patch Changes

package/dist/cjs/field.js

@@ -16,7 +16,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _reactUid = require("react-uid");
 
@@ -36,10 +36,10 @@ 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)({
+var fieldWrapperStyles = (0, _react2.css)({
   marginTop: gridSize
 });
-var requiredIndicatorStyles = (0, _core.css)({
+var requiredIndicatorStyles = (0, _react2.css)({
   paddingLeft: "".concat(gridSize / 4, "px"),
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   fontFamily: fontFamily
@@ -266,15 +266,15 @@ function Field(props) {
     id: fieldId
   });
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: fieldWrapperStyles
-  }, props.label && (0, _core.jsx)(_label.default, {
+  }, props.label && (0, _react2.jsx)(_label.default, {
     htmlFor: fieldId,
     id: "".concat(fieldId, "-label")
-  }, props.label, props.isRequired && (0, _core.jsx)("span", {
+  }, props.label, props.isRequired && (0, _react2.jsx)("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"
-  }, "*")), (0, _core.jsx)(FieldId.Provider, {
+  }, "*"), props.elementAfterLabel), (0, _react2.jsx)(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/cjs/fieldset.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -16,23 +16,23 @@ var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 var fontFamily = (0, _constants.fontFamily)();
 var gridSize = (0, _constants.gridSize)();
-var fieldsetLabelStyles = (0, _core.css)({
+var fieldsetLabelStyles = (0, _react.css)({
   display: 'inline-block',
   marginTop: 0,
   marginBottom: 0,
   fontFamily: "".concat(fontFamily)
 });
-var fieldSetStyles = (0, _core.css)({
+var fieldSetStyles = (0, _react.css)({
   marginTop: "".concat(gridSize, "px")
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var lightH200Styles = (0, _core.css)((0, _typography.h200)({
+var lightH200Styles = (0, _react.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)({
+var darkH200Styles = (0, _react.css)((0, _typography.h200)({
   theme: {
     mode: 'dark'
   }
@@ -44,7 +44,7 @@ var FieldsetLabel = function FieldsetLabel(_ref) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("label", {
+  return (0, _react.jsx)("label", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
   }, children);
 };
@@ -63,9 +63,9 @@ var FieldsetLabel = function FieldsetLabel(_ref) {
 var Fieldset = function Fieldset(_ref2) {
   var children = _ref2.children,
       legend = _ref2.legend;
-  return (0, _core.jsx)("fieldset", {
+  return (0, _react.jsx)("fieldset", {
     css: fieldSetStyles
-  }, legend && (0, _core.jsx)("legend", null, (0, _core.jsx)(FieldsetLabel, null, legend)), children);
+  }, legend && (0, _react.jsx)("legend", null, (0, _react.jsx)(FieldsetLabel, null, legend)), children);
 };
 
 var _default = Fieldset;

package/dist/cjs/form-footer.js

@@ -5,18 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = FormFooter;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
-var formFooterWrapperStyles = (0, _core.css)({
+var formFooterWrapperStyles = (0, _react.css)({
   display: 'flex',
   marginTop: "".concat(gridSize * 3, "px"),
   justifyContent: 'flex-end'
 });
-var justifyContentStyles = (0, _core.css)({
+var justifyContentStyles = (0, _react.css)({
   justifyContent: 'flex-start'
 });
 /**
@@ -33,7 +33,7 @@ function FormFooter(_ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? 'end' : _ref$align,
       children = _ref.children;
-  return (0, _core.jsx)("footer", {
+  return (0, _react.jsx)("footer", {
     css: [formFooterWrapperStyles, align === 'start' && justifyContentStyles]
   }, children);
 }

package/dist/cjs/form-header.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.FormHeaderTitle = exports.FormHeaderDescription = exports.FormHeaderContent = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -16,14 +16,14 @@ var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)();
-var formHeaderContentStyles = (0, _core.css)({
+var formHeaderContentStyles = (0, _react.css)({
   minWidth: '100%',
   marginTop: "".concat(gridSize, "px")
 });
-var formHeaderDescriptionStyles = (0, _core.css)({
+var formHeaderDescriptionStyles = (0, _react.css)({
   marginTop: "".concat(gridSize, "px")
 });
-var formHeaderTitleStyles = (0, _core.css)({
+var formHeaderTitleStyles = (0, _react.css)({
   marginTop: 0,
   marginRight: "".concat(gridSize * 4, "px"),
   lineHeight: "".concat(gridSize * 4, "px"),
@@ -31,17 +31,17 @@ var formHeaderTitleStyles = (0, _core.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var formHeaderWrapperStyles = (0, _core.css)({
+var formHeaderWrapperStyles = (0, _react.css)({
   fontFamily: "".concat(fontFamily)
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var darkH700Styles = (0, _core.css)((0, _typography.h700)({
+var darkH700Styles = (0, _react.css)((0, _typography.h700)({
   theme: {
     mode: 'dark'
   }
 })); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var lightH700Styles = (0, _core.css)((0, _typography.h700)({
+var lightH700Styles = (0, _react.css)((0, _typography.h700)({
   theme: {
     mode: 'light'
   }
@@ -49,7 +49,7 @@ var lightH700Styles = (0, _core.css)((0, _typography.h700)({
 
 var FormHeaderContent = function FormHeaderContent(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: formHeaderContentStyles
   }, children);
 };
@@ -58,7 +58,7 @@ exports.FormHeaderContent = FormHeaderContent;
 
 var FormHeaderDescription = function FormHeaderDescription(_ref2) {
   var children = _ref2.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: formHeaderDescriptionStyles
   }, children);
 };
@@ -71,7 +71,7 @@ var FormHeaderTitle = function FormHeaderTitle(_ref3) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("h2", {
+  return (0, _react.jsx)("h2", {
     css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
   }, children);
 };
@@ -80,7 +80,7 @@ exports.FormHeaderTitle = FormHeaderTitle;
 
 var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {
   var children = _ref4.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: formHeaderWrapperStyles
   }, children);
 };
@@ -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), children && (0, _core.jsx)(FormHeaderContent, null, children));
+  return (0, _react.jsx)(FormHeaderWrapper, null, title && (0, _react.jsx)(FormHeaderTitle, null, title), description && (0, _react.jsx)(FormHeaderDescription, null, description), children && (0, _react.jsx)(FormHeaderContent, null, children));
 };
 
 var _default = FormHeader;

package/dist/cjs/form-section.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -19,10 +19,10 @@ var _typography = require("@atlaskit/theme/typography");
 
 /** @jsx jsx */
 var gridSize = (0, _constants.gridSize)();
-var formSectionDescriptionStyles = (0, _core.css)({
+var formSectionDescriptionStyles = (0, _react2.css)({
   marginTop: "".concat(gridSize, "px")
 });
-var formSectionTitleStyles = (0, _core.css)({
+var formSectionTitleStyles = (0, _react2.css)({
   marginTop: 0,
   marginRight: "".concat(gridSize * 4, "px"),
   lineHeight: "".concat(gridSize * 4, "px"),
@@ -30,17 +30,17 @@ var formSectionTitleStyles = (0, _core.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var formSectionWrapperStyles = (0, _core.css)({
+var formSectionWrapperStyles = (0, _react2.css)({
   marginTop: "".concat(gridSize * 3, "px")
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var lightH600Styles = (0, _core.css)((0, _typography.h600)({
+var lightH600Styles = (0, _react2.css)((0, _typography.h600)({
   theme: {
     mode: 'light'
   }
 })); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var darkH600Styles = (0, _core.css)((0, _typography.h600)({
+var darkH600Styles = (0, _react2.css)((0, _typography.h600)({
   theme: {
     mode: 'dark'
   }
@@ -48,7 +48,7 @@ var darkH600Styles = (0, _core.css)((0, _typography.h600)({
 
 var FormSectionWrapper = function FormSectionWrapper(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: formSectionWrapperStyles
   }, children);
 };
@@ -59,14 +59,14 @@ var FormSectionTitle = function FormSectionTitle(_ref2) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("h3", {
+  return (0, _react2.jsx)("h3", {
     css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
   }, children);
 };
 
 var FormSectionDescription = function FormSectionDescription(_ref3) {
   var children = _ref3.children;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: formSectionDescriptionStyles
   }, children);
 };
@@ -86,7 +86,7 @@ var FormSection = function FormSection(_ref4) {
   var children = _ref4.children,
       description = _ref4.description,
       title = _ref4.title;
-  return (0, _core.jsx)(FormSectionWrapper, null, title && (0, _core.jsx)(FormSectionTitle, null, title), description && (0, _core.jsx)(FormSectionDescription, null, description), children);
+  return (0, _react2.jsx)(FormSectionWrapper, null, title && (0, _react2.jsx)(FormSectionTitle, null, title), description && (0, _react2.jsx)(FormSectionDescription, null, description), children);
 };
 
 var _default = FormSection;

package/dist/cjs/label.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -16,20 +16,20 @@ var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 var fontFamily = (0, _constants.fontFamily)();
 var gridSize = (0, _constants.gridSize)();
-var labelStyles = (0, _core.css)({
+var labelStyles = (0, _react.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)({
+var lightH200Styles = (0, _react.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)({
+var darkH200Styles = (0, _react.css)((0, _typography.h200)({
   theme: {
     mode: 'dark'
   }
@@ -51,7 +51,7 @@ var Label = function Label(_ref) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("label", {
+  return (0, _react.jsx)("label", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
     id: id,
     htmlFor: htmlFor

package/dist/cjs/messages.js

@@ -9,7 +9,7 @@ exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
 
@@ -29,40 +29,40 @@ var _field = require("./field");
 var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-var lightH200Styles = (0, _core.css)((0, _typography.h200)({
+var lightH200Styles = (0, _react2.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)({
+var darkH200Styles = (0, _react2.css)((0, _typography.h200)({
   theme: {
     mode: 'dark'
   }
 }));
-var messageErrorColorStyles = (0, _core.css)({
+var messageErrorColorStyles = (0, _react2.css)({
   color: "var(--ds-text-danger, #AE2A19)"
 });
-var messageNeutralColorStyles = (0, _core.css)({
+var messageNeutralColorStyles = (0, _react2.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
 });
-var messageValidColorStyles = (0, _core.css)({
+var messageValidColorStyles = (0, _react2.css)({
   color: "var(--ds-text-success, #216E4E)"
 });
-var messageStyles = (0, _core.css)({
+var messageStyles = (0, _react2.css)({
   display: 'flex',
   marginTop: "".concat(gridSize * 0.5, "px"),
   justifyContent: 'baseline',
   fontFamily: "".concat(fontFamily),
   fontWeight: 'normal'
 });
-var iconWrapperStyles = (0, _core.css)({
+var iconWrapperStyles = (0, _react2.css)({
   display: 'flex'
 });
 
 var IconWrapper = function IconWrapper(_ref) {
   var children = _ref.children;
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     css: iconWrapperStyles
   }, children);
 };
@@ -77,7 +77,7 @@ var Message = function Message(_ref2) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
     "data-testid": testId,
     id: fieldId
@@ -94,8 +94,8 @@ var Message = function Message(_ref2) {
 var HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
       testId = _ref3.testId;
-  return (0, _core.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
-    return (0, _core.jsx)(Message, {
+  return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+    return (0, _react2.jsx)(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
       testId: testId
     }, children);
@@ -115,12 +115,12 @@ exports.HelperMessage = HelperMessage;
 var ErrorMessage = function ErrorMessage(_ref4) {
   var children = _ref4.children,
       testId = _ref4.testId;
-  return (0, _core.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
-    return (0, _core.jsx)(Message, {
+  return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+    return (0, _react2.jsx)(Message, {
       error: true,
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
-    }, (0, _core.jsx)(IconWrapper, null, (0, _core.jsx)(_error.default, {
+    }, (0, _react2.jsx)(IconWrapper, null, (0, _react2.jsx)(_error.default, {
       size: "small",
       label: "error"
     })), children);
@@ -140,12 +140,12 @@ exports.ErrorMessage = ErrorMessage;
 var ValidMessage = function ValidMessage(_ref5) {
   var children = _ref5.children,
       testId = _ref5.testId;
-  return (0, _core.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
-    return (0, _core.jsx)(Message, {
+  return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+    return (0, _react2.jsx)(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
       testId: testId,
       valid: true
-    }, (0, _core.jsx)(IconWrapper, null, (0, _core.jsx)(_success.default, {
+    }, (0, _react2.jsx)(IconWrapper, null, (0, _react2.jsx)(_success.default, {
       size: "small",
       label: "success"
     })), children);

package/dist/cjs/version.json

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

package/dist/es2019/field.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { R400 } from '@atlaskit/theme/colors';
@@ -236,7 +236,7 @@ export default function Field(props) {
   }, props.label, props.isRequired && jsx("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"
-  }, "*")), jsx(FieldId.Provider, {
+  }, "*"), props.elementAfterLabel), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/es2019/fieldset.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';

package/dist/es2019/form-footer.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const gridSize = getGridSize();
 const formFooterWrapperStyles = css({

package/dist/es2019/form-header.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';

package/dist/es2019/form-section.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';

package/dist/es2019/label.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';

package/dist/es2019/messages.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N200 } from '@atlaskit/theme/colors';

package/dist/es2019/version.json

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

package/dist/esm/field.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { R400 } from '@atlaskit/theme/colors';
@@ -254,7 +254,7 @@ export default function Field(props) {
   }, props.label, props.isRequired && jsx("span", {
     css: requiredIndicatorStyles,
     "aria-hidden": "true"
-  }, "*")), jsx(FieldId.Provider, {
+  }, "*"), props.elementAfterLabel), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/esm/fieldset.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';

package/dist/esm/form-footer.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 var gridSize = getGridSize();
 var formFooterWrapperStyles = css({

package/dist/esm/form-header.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h700 } from '@atlaskit/theme/typography';

package/dist/esm/form-section.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';

package/dist/esm/label.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';

package/dist/esm/messages.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { N200 } from '@atlaskit/theme/colors';

package/dist/esm/version.json

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