@atlaskit/form 8.5.9 → 8.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/form
 
+## 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, {
+  }, "*")), (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.6.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';

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.6.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';

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.6.0",
 	"sideEffects": false
 }

package/dist/types/field.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { FormEvent, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 declare type SupportedElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {
     id: string;
@@ -74,5 +75,5 @@ 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: import("react").Context<string | undefined>;
-export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): JSX.Element;
+export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
 export {};

package/dist/types/fieldset.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FieldsetProps {
     /**
      * Content to render in the fieldset.
@@ -20,5 +21,5 @@ export interface FieldsetProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  */
-declare const Fieldset: ({ children, legend }: FieldsetProps) => JSX.Element;
+declare const Fieldset: ({ children, legend }: FieldsetProps) => jsx.JSX.Element;
 export default Fieldset;

package/dist/types/form-footer.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 import { Align } from './types';
 export interface FormFooterProps {
     /**
@@ -20,4 +21,4 @@ export interface FormFooterProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-export default function FormFooter({ align, children, }: FormFooterProps): JSX.Element;
+export default function FormFooter({ align, children, }: FormFooterProps): jsx.JSX.Element;

package/dist/types-ts4.0/field.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { FormEvent, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 declare type SupportedElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {
     id: string;
@@ -74,5 +75,5 @@ 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: import("react").Context<string | undefined>;
-export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): JSX.Element;
+export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
 export {};

package/dist/types-ts4.0/fieldset.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FieldsetProps {
     /**
      * Content to render in the fieldset.
@@ -20,5 +21,5 @@ export interface FieldsetProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  */
-declare const Fieldset: ({ children, legend }: FieldsetProps) => JSX.Element;
+declare const Fieldset: ({ children, legend }: FieldsetProps) => jsx.JSX.Element;
 export default Fieldset;

package/dist/types-ts4.0/form-footer.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 import { Align } from './types';
 export interface FormFooterProps {
     /**
@@ -20,4 +21,4 @@ export interface FormFooterProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-export default function FormFooter({ align, children, }: FormFooterProps): JSX.Element;
+export default function FormFooter({ align, children, }: FormFooterProps): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.5.9",
+  "version": "8.6.0",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -45,11 +45,11 @@
   },
   "homepage": "https://atlassian.design/components/form/",
   "dependencies": {
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "final-form": "^4.20.1",
     "final-form-focus": "^1.1.2",
     "lodash": "^4.17.21",
@@ -62,22 +62,22 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/calendar": "^12.4.0",
-    "@atlaskit/checkbox": "^12.3.0",
-    "@atlaskit/datetime-picker": "^12.2.0",
+    "@atlaskit/checkbox": "^12.4.0",
+    "@atlaskit/datetime-picker": "^12.3.0",
     "@atlaskit/docs": "^9.0.0",
     "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/droplist": "^11.0.0",
     "@atlaskit/ds-lib": "^2.1.1",
-    "@atlaskit/modal-dialog": "^12.3.0",
+    "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/range": "^6.0.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/range": "^6.1.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textarea": "^4.3.0",
-    "@atlaskit/textfield": "^5.2.0",
+    "@atlaskit/textarea": "^4.5.0",
+    "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/toggle": "^12.5.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/report.api.md

@@ -1,12 +1,15 @@
-## API Report File for "@atlaskit/form"
+## API Report File for "@atlaskit/form".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 import { FC } from 'react';
 import { FormApi as FormApi_2 } from 'final-form';
 import { FormEvent } from 'react';
 import { FormState } from 'final-form';
+import { jsx } from '@emotion/react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 
@@ -76,7 +79,7 @@ export declare const ErrorMessage: React_2.FC<MessageProps>;
 export declare function Field<
   FieldValue = string,
   Element extends SupportedElements = HTMLInputElement
->(props: FieldComponentProps<FieldValue, Element>): JSX.Element;
+>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
 
 declare interface FieldComponentProps<
   FieldValue,
@@ -164,7 +167,7 @@ export declare interface FieldProps<
 export declare const Fieldset: ({
   children,
   legend,
-}: FieldsetProps) => JSX.Element;
+}: FieldsetProps) => jsx.JSX.Element;
 
 declare interface FieldsetProps {
   /**
@@ -206,7 +209,7 @@ declare interface FormChildrenProps {
 export declare function FormFooter({
   align,
   children,
-}: FormFooterProps): JSX.Element;
+}: FormFooterProps): jsx.JSX.Element;
 
 declare interface FormFooterProps {
   /**