@atlaskit/form 12.6.1 → 12.7.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/form
 
+## 12.7.0
+
+### Minor Changes
+
+- [`edef4ab21e5c5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/edef4ab21e5c5) -
+  We are testing a new streamlined implementation of the field component behind a feature flag. If
+  this fix is successful it will be available in a later release.
+
+## 12.6.2
+
+### Patch Changes
+
+- [`2f220beaedb7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2f220beaedb7a) -
+  Remove unused dependency.
+
 ## 12.6.1
 
 ### Patch Changes
@@ -307,8 +322,7 @@
   handle `.css` imports correctly.Most bundlers come with built-in support for `.css` imports, so
   you may not need to do anything. If you are using a different bundler, please refer to the
   documentation for that bundler to understand how to handle `.css` imports.For more information on
-  the migration, please refer to [RFC-73 Migrating our components to
-  Compiled
+  the migration, please refer to [RFC-73 Migrating our components to Compiled
   CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/859
 
 ## 10.6.3

package/dist/cjs/field.js

@@ -1,4 +1,4 @@
-/* field.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* field.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -8,16 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Field;
 require("./field.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireWildcard(require("react"));
 var _useId = require("@atlaskit/ds-lib/use-id");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _fieldIdContext = require("./field-id-context");
 var _form = require("./form");
 var _label = require("./label");
+var _messages = require("./messages");
 var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -67,6 +68,11 @@ function isShallowEqual(previousValue, currentValue) {
 }
 function Field(props) {
   var _getCurrentValue;
+  var _props$children = props.children,
+    children = _props$children === void 0 ? function () {
+      return null;
+    } : _props$children,
+    component = props.component;
   var _useContext = (0, _react.useContext)(_form.FormContext),
     registerField = _useContext.registerField,
     getCurrentValue = _useContext.getCurrentValue;
@@ -248,16 +254,18 @@ function Field(props) {
     'aria-labelledby': "".concat(fieldId, "-label"),
     id: fieldId
   });
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": props.testId,
     className: (0, _runtime.ax)(["_1pfhu2gc"])
-  }, props.label && /*#__PURE__*/React.createElement(_label.Label, {
+  }, props.label && /*#__PURE__*/_react.default.createElement(_label.Label, {
     htmlFor: fieldId,
     id: "".concat(fieldId, "-label"),
     testId: props.testId && "".concat(props.testId, "--label")
-  }, props.label, props.isRequired && /*#__PURE__*/React.createElement(_requiredAsterisk.default, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Provider, {
+  }, props.label, props.isRequired && /*#__PURE__*/_react.default.createElement(_requiredAsterisk.default, null), props.elementAfterLabel), /*#__PURE__*/_react.default.createElement(_fieldIdContext.FieldId.Provider, {
     value: fieldId
-  }, props.children({
+  }, component && (0, _platformFeatureFlags.fg)('platform_design-system-team_field-upgrade') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, component && component({
+    fieldProps: extendedFieldProps
+  }), /*#__PURE__*/_react.default.createElement(_messages.MessageWrapper, null, props.helperMessage && /*#__PURE__*/_react.default.createElement(_messages.HelperMessage, null, props.helperMessage), state.error && /*#__PURE__*/_react.default.createElement(_messages.ErrorMessage, null, props.errorMessage || state.error), state.meta.touched && state.valid && props.validMessage && /*#__PURE__*/_react.default.createElement(_messages.ValidMessage, null, props.validMessage))) : children({
     fieldProps: extendedFieldProps,
     error: state.error,
     valid: state.valid,

package/dist/cjs/fieldset.js

@@ -1,4 +1,4 @@
-/* fieldset.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* fieldset.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/form-footer.js

@@ -1,4 +1,4 @@
-/* form-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* form-footer.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/form-header.js

@@ -1,4 +1,4 @@
-/* form-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* form-header.tsx generated by @compiled/babel-plugin v0.36.1 */
 /* eslint-disable @atlaskit/design-system/use-primitives */
 "use strict";
 

package/dist/cjs/form-section.js

@@ -1,4 +1,4 @@
-/* form-section.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* form-section.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/label.js

@@ -1,4 +1,4 @@
-/* label.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* label.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/messages.js

@@ -1,4 +1,4 @@
-/* messages.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* messages.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/required-asterisk.js

@@ -1,4 +1,4 @@
-/* required-asterisk.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* required-asterisk.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/es2019/field.js

@@ -1,12 +1,13 @@
-/* field.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* field.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./field.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
 import { Label } from './label';
+import { ErrorMessage, HelperMessage, MessageWrapper, ValidMessage } from './messages';
 import RequiredAsterisk from './required-asterisk';
 const fieldWrapperStyles = null;
 function isEvent(event) {
@@ -53,6 +54,10 @@ function isShallowEqual(previousValue, currentValue) {
 }
 export default function Field(props) {
   var _getCurrentValue;
+  const {
+    children = () => null,
+    component
+  } = props;
   const {
     registerField,
     getCurrentValue
@@ -241,7 +246,9 @@ export default function Field(props) {
     testId: props.testId && `${props.testId}--label`
   }, props.label, props.isRequired && /*#__PURE__*/React.createElement(RequiredAsterisk, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(FieldId.Provider, {
     value: fieldId
-  }, props.children({
+  }, component && fg('platform_design-system-team_field-upgrade') ? /*#__PURE__*/React.createElement(React.Fragment, null, component && component({
+    fieldProps: extendedFieldProps
+  }), /*#__PURE__*/React.createElement(MessageWrapper, null, props.helperMessage && /*#__PURE__*/React.createElement(HelperMessage, null, props.helperMessage), state.error && /*#__PURE__*/React.createElement(ErrorMessage, null, props.errorMessage || state.error), state.meta.touched && state.valid && props.validMessage && /*#__PURE__*/React.createElement(ValidMessage, null, props.validMessage))) : children({
     fieldProps: extendedFieldProps,
     error: state.error,
     valid: state.valid,

package/dist/es2019/fieldset.js

@@ -1,4 +1,4 @@
-/* fieldset.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* fieldset.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./fieldset.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/form-footer.js

@@ -1,4 +1,4 @@
-/* form-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* form-footer.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./form-footer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/form-header.js

@@ -1,4 +1,4 @@
-/* form-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* form-header.tsx generated by @compiled/babel-plugin v0.36.1 */
 /* eslint-disable @atlaskit/design-system/use-primitives */
 import "./form-header.compiled.css";
 import * as React from 'react';

package/dist/es2019/form-section.js

@@ -1,4 +1,4 @@
-/* form-section.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* form-section.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./form-section.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/label.js

@@ -1,4 +1,4 @@
-/* label.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* label.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./label.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/messages.js

@@ -1,4 +1,4 @@
-/* messages.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* messages.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./messages.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/required-asterisk.js

@@ -1,4 +1,4 @@
-/* required-asterisk.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* required-asterisk.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./required-asterisk.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/field.js

@@ -1,17 +1,18 @@
-/* field.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* field.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
 import "./field.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
 import { Label } from './label';
+import { ErrorMessage, HelperMessage, MessageWrapper, ValidMessage } from './messages';
 import RequiredAsterisk from './required-asterisk';
 var fieldWrapperStyles = null;
 function isEvent(event) {
@@ -58,6 +59,11 @@ function isShallowEqual(previousValue, currentValue) {
 }
 export default function Field(props) {
   var _getCurrentValue;
+  var _props$children = props.children,
+    children = _props$children === void 0 ? function () {
+      return null;
+    } : _props$children,
+    component = props.component;
   var _useContext = useContext(FormContext),
     registerField = _useContext.registerField,
     getCurrentValue = _useContext.getCurrentValue;
@@ -248,7 +254,9 @@ export default function Field(props) {
     testId: props.testId && "".concat(props.testId, "--label")
   }, props.label, props.isRequired && /*#__PURE__*/React.createElement(RequiredAsterisk, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(FieldId.Provider, {
     value: fieldId
-  }, props.children({
+  }, component && fg('platform_design-system-team_field-upgrade') ? /*#__PURE__*/React.createElement(React.Fragment, null, component && component({
+    fieldProps: extendedFieldProps
+  }), /*#__PURE__*/React.createElement(MessageWrapper, null, props.helperMessage && /*#__PURE__*/React.createElement(HelperMessage, null, props.helperMessage), state.error && /*#__PURE__*/React.createElement(ErrorMessage, null, props.errorMessage || state.error), state.meta.touched && state.valid && props.validMessage && /*#__PURE__*/React.createElement(ValidMessage, null, props.validMessage))) : children({
     fieldProps: extendedFieldProps,
     error: state.error,
     valid: state.valid,

package/dist/esm/fieldset.js

@@ -1,4 +1,4 @@
-/* fieldset.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* fieldset.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./fieldset.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/form-footer.js

@@ -1,4 +1,4 @@
-/* form-footer.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* form-footer.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./form-footer.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/form-header.js

@@ -1,4 +1,4 @@
-/* form-header.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* form-header.tsx generated by @compiled/babel-plugin v0.36.1 */
 /* eslint-disable @atlaskit/design-system/use-primitives */
 import "./form-header.compiled.css";
 import * as React from 'react';

package/dist/esm/form-section.js

@@ -1,4 +1,4 @@
-/* form-section.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* form-section.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./form-section.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/label.js

@@ -1,4 +1,4 @@
-/* label.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* label.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./label.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/messages.js

@@ -1,4 +1,4 @@
-/* messages.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* messages.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./messages.compiled.css";
 import * as React from 'react';

package/dist/esm/required-asterisk.js

@@ -1,4 +1,4 @@
-/* required-asterisk.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* required-asterisk.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./required-asterisk.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/types/field.d.ts

@@ -29,16 +29,34 @@ export interface Meta {
     submitError?: boolean;
     validating?: boolean;
 }
-export interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
+export type FieldComponentProps<FieldValue, Element extends SupportedElements> = {
     /**
-     * Content to render in the field. This is a function that is called with props for the field component and other information about the field.
+     * Content to render in the field. This is a function that is called with props for the field component and other information about the field. This cannot be used at the same time as the `component` prop.
      */
-    children: (args: {
+    children?: (args: {
         fieldProps: FieldProps<FieldValue, Element>;
         error?: string;
         valid: boolean;
         meta: Meta;
     }) => ReactNode;
+    /**
+     * Content to render in the field. This will be rendered with the `*Message` props. This cannot be used at the same time as the `children` prop.
+     */
+    component?: (args: {
+        fieldProps: FieldProps<FieldValue, Element>;
+    }) => ReactNode;
+    /**
+     * Renders a `HelperMessage` with the provided content when using the `component` prop.
+     */
+    helperMessage?: ReactNode;
+    /**
+     * Renders an `ErrorMessage` with the provided content when using the `component` prop.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Renders a `ValidMessage` with the provided content when using the `component` prop.
+     */
+    validMessage?: ReactNode;
     /**
      * Sets the default value of the field. If a function is provided, it is called with the current default value of the field.
      */
@@ -79,6 +97,6 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      */
     testId?: string;
-}
+};
 export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): JSX.Element;
 export {};

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

@@ -29,16 +29,34 @@ export interface Meta {
     submitError?: boolean;
     validating?: boolean;
 }
-export interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
+export type FieldComponentProps<FieldValue, Element extends SupportedElements> = {
     /**
-     * Content to render in the field. This is a function that is called with props for the field component and other information about the field.
+     * Content to render in the field. This is a function that is called with props for the field component and other information about the field. This cannot be used at the same time as the `component` prop.
      */
-    children: (args: {
+    children?: (args: {
         fieldProps: FieldProps<FieldValue, Element>;
         error?: string;
         valid: boolean;
         meta: Meta;
     }) => ReactNode;
+    /**
+     * Content to render in the field. This will be rendered with the `*Message` props. This cannot be used at the same time as the `children` prop.
+     */
+    component?: (args: {
+        fieldProps: FieldProps<FieldValue, Element>;
+    }) => ReactNode;
+    /**
+     * Renders a `HelperMessage` with the provided content when using the `component` prop.
+     */
+    helperMessage?: ReactNode;
+    /**
+     * Renders an `ErrorMessage` with the provided content when using the `component` prop.
+     */
+    errorMessage?: ReactNode;
+    /**
+     * Renders a `ValidMessage` with the provided content when using the `component` prop.
+     */
+    validMessage?: ReactNode;
     /**
      * Sets the default value of the field. If a function is provided, it is called with the current default value of the field.
      */
@@ -79,6 +97,6 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
      * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
      */
     testId?: string;
-}
+};
 export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): JSX.Element;
 export {};

package/offerings.json

@@ -0,0 +1,40 @@
+[
+	{
+		"name": "Form",
+		"package": "@atlaskit/form",
+		"import": {
+			"name": "Form",
+			"package": "@atlaskit/form",
+			"type": "default"
+		},
+		"keywords": ["form", "validation", "field", "input", "submit", "state"],
+		"categories": ["form"],
+		"shortDescription": "A component for building forms with validation and state management.",
+		"status": "general-availability",
+		"accessibilityGuidelines": [
+			"Provide clear labels for all form fields",
+			"Use appropriate error messaging",
+			"Ensure keyboard navigation between fields",
+			"Mark required fields clearly",
+			"Provide helpful validation feedback"
+		],
+		"usageGuidelines": [
+			"Use for complex forms with validation",
+			"Provide clear field labels and instructions",
+			"Use single column layout for better comprehension",
+			"Mark required fields with asterisk (*)",
+			"Provide specific error messages"
+		],
+		"contentGuidelines": [
+			"Use clear, concise labels",
+			"Write helpful placeholder text",
+			"Provide specific error messages",
+			"Use consistent terminology",
+			"Always include a visible label (exception: search fields)",
+			"Match field length to intended content length"
+		],
+		"examples": {
+			"basic": "./examples/ai/form.tsx"
+		}
+	}
+]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "12.6.1",
+	"version": "12.7.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,10 +28,9 @@
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.14.0",
-		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"final-form": "^4.20.3",
@@ -57,7 +56,7 @@
 		"@atlaskit/radio": "^8.3.0",
 		"@atlaskit/range": "^9.2.0",
 		"@atlaskit/section-message": "^8.7.0",
-		"@atlaskit/select": "^21.2.0",
+		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.1.0",
@@ -117,6 +116,9 @@
 		"platform_design-system-team_form-upgrade": {
 			"type": "boolean"
 		},
+		"platform_design-system-team_field-upgrade": {
+			"type": "boolean"
+		},
 		"platform_design-system-team_checkbox-field-spread": {
 			"type": "boolean"
 		},