@atlaskit/form 8.11.5 → 8.11.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/form
 
+## 8.11.7
+
+### Patch Changes
+
+- [`ddb4e858a79`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ddb4e858a79) - Removes usage of deprecated theme mixins in favor of static token / color usage.
+
+## 8.11.6
+
+### Patch Changes
+
+- [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
+
 ## 8.11.5
 
 ### Patch Changes

package/dist/cjs/fieldset.js

@@ -32,11 +32,14 @@ var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode)
       mode: mode
     }
   }), {
-    color: "var(--ds-text-subtle, ".concat((0, _colors.subtleHeading)({
+    color: (0, _components.themed)({
+      dark: "var(--ds-text-subtle, ".concat(_colors.DN300, ")"),
+      light: "var(--ds-text-subtle, ".concat(_colors.N200, ")")
+    })({
       theme: {
         mode: mode
       }
-    }), ")")
+    })
   }]);
 };
 

package/dist/cjs/form-section.js

@@ -1,20 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _components = require("@atlaskit/theme/components");
 var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 
-var formSectionDescriptionStyles = (0, _react2.css)({
+var formSectionDescriptionStyles = (0, _react.css)({
   marginTop: "var(--ds-space-100, 8px)"
 });
-var formSectionTitleStyles = (0, _react2.css)({
+var formSectionTitleStyles = (0, _react.css)({
   marginTop: 0,
   marginRight: "var(--ds-space-400, 32px)",
   lineHeight: "var(--ds-space-400, 32px)",
@@ -22,25 +20,25 @@ var formSectionTitleStyles = (0, _react2.css)({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var formSectionWrapperStyles = (0, _react2.css)({
+var formSectionWrapperStyles = (0, _react.css)({
   marginTop: "var(--ds-space-300, 24px)"
 });
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var lightH600Styles = (0, _react2.css)((0, _typography.h600)({
+var lightH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'light'
   }
 }));
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var darkH600Styles = (0, _react2.css)((0, _typography.h600)({
+var darkH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'dark'
   }
 }));
 var FormSectionWrapper = function FormSectionWrapper(_ref) {
   var children = _ref.children;
-  return (0, _react2.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: formSectionWrapperStyles
   }, children);
 };
@@ -48,13 +46,13 @@ var FormSectionTitle = function FormSectionTitle(_ref2) {
   var children = _ref2.children;
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
     mode = _useGlobalTheme.mode;
-  return (0, _react2.jsx)("h3", {
+  return (0, _react.jsx)("h3", {
     css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
   }, children);
 };
 var FormSectionDescription = function FormSectionDescription(_ref3) {
   var children = _ref3.children;
-  return (0, _react2.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: formSectionDescriptionStyles
   }, children);
 };
@@ -73,7 +71,7 @@ var FormSection = function FormSection(_ref4) {
   var children = _ref4.children,
     description = _ref4.description,
     title = _ref4.title;
-  return (0, _react2.jsx)(FormSectionWrapper, null, title && (0, _react2.jsx)(FormSectionTitle, null, title), description && (0, _react2.jsx)(FormSectionDescription, null, description), children);
+  return (0, _react.jsx)(FormSectionWrapper, null, title && (0, _react.jsx)(FormSectionTitle, null, title), description && (0, _react.jsx)(FormSectionDescription, null, description), children);
 };
 var _default = FormSection;
 exports.default = _default;

package/dist/cjs/label.js

@@ -29,11 +29,14 @@ var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode)
       mode: mode
     }
   }), {
-    color: "var(--ds-text-subtle, ".concat((0, _colors.subtleHeading)({
+    color: (0, _components.themed)({
+      dark: "var(--ds-text-subtle, ".concat(_colors.DN300, ")"),
+      light: "var(--ds-text-subtle, ".concat(_colors.N200, ")")
+    })({
       theme: {
         mode: mode
       }
-    }), ")")
+    })
   }]);
 };
 

package/dist/cjs/messages.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _colors = require("@atlaskit/theme/colors");
@@ -27,18 +26,18 @@ var _field = require("./field");
 var fontFamily = (0, _constants.fontFamily)();
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var lightH200Styles = (0, _react2.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, _react2.css)((0, _typography.h200)({
+var darkH200Styles = (0, _react.css)((0, _typography.h200)({
   theme: {
     mode: 'dark'
   }
 }));
-var messageStyles = (0, _react2.css)({
+var messageStyles = (0, _react.css)({
   display: 'flex',
   marginTop: "var(--ds-space-050, 4px)",
   justifyContent: 'baseline',
@@ -46,31 +45,31 @@ var messageStyles = (0, _react2.css)({
   fontWeight: 'normal'
 });
 var messageAppearanceStyles = {
-  default: (0, _react2.css)({
+  default: (0, _react.css)({
     color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
   }),
-  error: (0, _react2.css)({
+  error: (0, _react.css)({
     color: "var(--ds-text-danger, #AE2A19)"
   }),
-  valid: (0, _react2.css)({
+  valid: (0, _react.css)({
     color: "var(--ds-text-success, #216E4E)"
   })
 };
-var iconWrapperStyles = (0, _react2.css)({
+var iconWrapperStyles = (0, _react.css)({
   display: 'flex'
 });
 var IconWrapper = function IconWrapper(_ref) {
   var children = _ref.children;
-  return (0, _react2.jsx)("span", {
+  return (0, _react.jsx)("span", {
     css: iconWrapperStyles
   }, children);
 };
 var messageIcons = {
-  error: (0, _react2.jsx)(_error.default, {
+  error: (0, _react.jsx)(_error.default, {
     size: "small",
     label: "error"
   }),
-  valid: (0, _react2.jsx)(_success.default, {
+  valid: (0, _react.jsx)(_success.default, {
     size: "small",
     label: "success"
   })
@@ -93,13 +92,13 @@ var Message = function Message(_ref2) {
    * If the child is just a string, this is not required and we can use one
    * less DOM element.
    */
-  var content = typeof children === 'string' ? children : (0, _react2.jsx)("span", null, children);
-  return (0, _react2.jsx)("div", {
+  var content = typeof children === 'string' ? children : (0, _react.jsx)("span", null, children);
+  return (0, _react.jsx)("div", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
     role: "alert"
-  }, icon && (0, _react2.jsx)(IconWrapper, null, icon), content);
+  }, icon && (0, _react.jsx)(IconWrapper, null, icon), content);
 };
 
 /**
@@ -112,8 +111,8 @@ var Message = function Message(_ref2) {
 var HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId;
-  return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
-    return (0, _react2.jsx)(Message, {
+  return (0, _react.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+    return (0, _react.jsx)(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
       testId: testId
     }, children);
@@ -131,8 +130,8 @@ exports.HelperMessage = HelperMessage;
 var ErrorMessage = function ErrorMessage(_ref4) {
   var children = _ref4.children,
     testId = _ref4.testId;
-  return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
-    return (0, _react2.jsx)(Message, {
+  return (0, _react.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+    return (0, _react.jsx)(Message, {
       appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
@@ -151,8 +150,8 @@ exports.ErrorMessage = ErrorMessage;
 var ValidMessage = function ValidMessage(_ref5) {
   var children = _ref5.children,
     testId = _ref5.testId;
-  return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
-    return (0, _react2.jsx)(Message, {
+  return (0, _react.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
+    return (0, _react.jsx)(Message, {
       appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
       testId: testId

package/dist/cjs/version.json

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

package/dist/es2019/fieldset.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { subtleHeading } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
+import { DN300, N200 } from '@atlaskit/theme/colors';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 const fontFamily = getFontFamily();
@@ -25,11 +25,14 @@ const getFieldsetLabelDynamicStyles = mode => css([h200({
     mode
   }
 }), {
-  color: `var(--ds-text-subtle, ${subtleHeading({
+  color: themed({
+    dark: `var(--ds-text-subtle, ${DN300})`,
+    light: `var(--ds-text-subtle, ${N200})`
+  })({
     theme: {
       mode
     }
-  })})`
+  })
 }]);
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage

package/dist/es2019/form-section.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { h600 } from '@atlaskit/theme/typography';

package/dist/es2019/label.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { subtleHeading } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
+import { DN300, N200 } from '@atlaskit/theme/colors';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 const fontFamily = getFontFamily();
@@ -22,11 +22,14 @@ const getFieldsetLabelDynamicStyles = mode => css([h200({
     mode
   }
 }), {
-  color: `var(--ds-text-subtle, ${subtleHeading({
+  color: themed({
+    dark: `var(--ds-text-subtle, ${DN300})`,
+    light: `var(--ds-text-subtle, ${N200})`
+  })({
     theme: {
       mode
     }
-  })})`
+  })
 }]);
 
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage

package/dist/es2019/messages.js

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

package/dist/es2019/version.json

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

package/dist/esm/fieldset.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { subtleHeading } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
+import { DN300, N200 } from '@atlaskit/theme/colors';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 var fontFamily = getFontFamily();
@@ -26,11 +26,14 @@ var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode)
       mode: mode
     }
   }), {
-    color: "var(--ds-text-subtle, ".concat(subtleHeading({
+    color: themed({
+      dark: "var(--ds-text-subtle, ".concat(DN300, ")"),
+      light: "var(--ds-text-subtle, ".concat(N200, ")")
+    })({
       theme: {
         mode: mode
       }
-    }), ")")
+    })
   }]);
 };
 

package/dist/esm/form-section.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { h600 } from '@atlaskit/theme/typography';

package/dist/esm/label.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-import { subtleHeading } from '@atlaskit/theme/colors';
-import { useGlobalTheme } from '@atlaskit/theme/components';
+import { DN300, N200 } from '@atlaskit/theme/colors';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 var fontFamily = getFontFamily();
@@ -23,11 +23,14 @@ var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode)
       mode: mode
     }
   }), {
-    color: "var(--ds-text-subtle, ".concat(subtleHeading({
+    color: themed({
+      dark: "var(--ds-text-subtle, ".concat(DN300, ")"),
+      light: "var(--ds-text-subtle, ".concat(N200, ")")
+    })({
       theme: {
         mode: mode
       }
-    }), ")")
+    })
   }]);
 };
 

package/dist/esm/messages.js

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

package/dist/esm/version.json

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

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FormHeaderProps {
     /**
      * Title of the form. This is a header.
@@ -14,15 +15,15 @@ export interface FormHeaderProps {
      */
     children?: ReactNode;
 }
-declare const FormHeaderContent: React.FC<{
+declare const FormHeaderContent: ({ children }: {
     children: ReactNode;
-}>;
-declare const FormHeaderDescription: React.FC<{
+}) => jsx.JSX.Element;
+declare const FormHeaderDescription: ({ children }: {
     children: ReactNode;
-}>;
-declare const FormHeaderTitle: React.FC<{
+}) => jsx.JSX.Element;
+declare const FormHeaderTitle: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
  * __Form header__
  *
@@ -33,6 +34,6 @@ declare const FormHeaderTitle: React.FC<{
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-declare const FormHeader: React.FC<FormHeaderProps>;
+declare const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;
 export default FormHeader;
 export { FormHeaderContent, FormHeaderDescription, FormHeaderTitle };

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FormSectionProps {
     /**
      * Title of the form section.
@@ -24,5 +25,5 @@ export interface FormSectionProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-declare const FormSection: React.FC<FormSectionProps>;
+declare const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;
 export default FormSection;

package/dist/types/messages.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 type MessageAppearance = 'default' | 'error' | 'valid';
 /**
  * API for the internal `<Message />` component. This is not public API.
@@ -32,7 +33,7 @@ type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
  * 'Password should be more than 4 characters'
  *
  */
-export declare const HelperMessage: React.FC<MessageProps>;
+export declare const HelperMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Error message__
  *
@@ -40,7 +41,7 @@ export declare const HelperMessage: React.FC<MessageProps>;
  * 'Invalid username, needs to be more than 4 characters'.
  *
  */
-export declare const ErrorMessage: React.FC<MessageProps>;
+export declare const ErrorMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Valid message__
  *
@@ -48,5 +49,5 @@ export declare const ErrorMessage: React.FC<MessageProps>;
  * a helper message could be 'Nice one, this username is available'.
  *
  */
-export declare const ValidMessage: React.FC<MessageProps>;
+export declare const ValidMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/form-header.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FormHeaderProps {
     /**
      * Title of the form. This is a header.
@@ -14,15 +15,15 @@ export interface FormHeaderProps {
      */
     children?: ReactNode;
 }
-declare const FormHeaderContent: React.FC<{
+declare const FormHeaderContent: ({ children }: {
     children: ReactNode;
-}>;
-declare const FormHeaderDescription: React.FC<{
+}) => jsx.JSX.Element;
+declare const FormHeaderDescription: ({ children }: {
     children: ReactNode;
-}>;
-declare const FormHeaderTitle: React.FC<{
+}) => jsx.JSX.Element;
+declare const FormHeaderTitle: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
  * __Form header__
  *
@@ -33,6 +34,6 @@ declare const FormHeaderTitle: React.FC<{
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-declare const FormHeader: React.FC<FormHeaderProps>;
+declare const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;
 export default FormHeader;
 export { FormHeaderContent, FormHeaderDescription, FormHeaderTitle };

package/dist/types-ts4.5/form-section.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FormSectionProps {
     /**
      * Title of the form section.
@@ -24,5 +25,5 @@ export interface FormSectionProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-declare const FormSection: React.FC<FormSectionProps>;
+declare const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;
 export default FormSection;

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 type MessageAppearance = 'default' | 'error' | 'valid';
 /**
  * API for the internal `<Message />` component. This is not public API.
@@ -32,7 +33,7 @@ type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
  * 'Password should be more than 4 characters'
  *
  */
-export declare const HelperMessage: React.FC<MessageProps>;
+export declare const HelperMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Error message__
  *
@@ -40,7 +41,7 @@ export declare const HelperMessage: React.FC<MessageProps>;
  * 'Invalid username, needs to be more than 4 characters'.
  *
  */
-export declare const ErrorMessage: React.FC<MessageProps>;
+export declare const ErrorMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Valid message__
  *
@@ -48,5 +49,5 @@ export declare const ErrorMessage: React.FC<MessageProps>;
  * a helper message could be 'Nice one, this username is available'.
  *
  */
-export declare const ValidMessage: React.FC<MessageProps>;
+export declare const ValidMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.11.5",
+  "version": "8.11.7",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
   },
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Form",
       "category": "Components"
@@ -48,7 +48,7 @@
   "dependencies": {
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "final-form": "^4.20.1",
@@ -64,16 +64,16 @@
     "@atlaskit/button": "^16.7.0",
     "@atlaskit/calendar": "^13.1.0",
     "@atlaskit/checkbox": "^12.6.0",
-    "@atlaskit/datetime-picker": "^12.6.0",
+    "@atlaskit/datetime-picker": "^12.7.0",
     "@atlaskit/docs": "^9.1.0",
     "@atlaskit/dropdown-menu": "^11.9.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/lozenge": "^11.4.0",
-    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/radio": "^5.6.0",
     "@atlaskit/range": "^7.1.0",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.4.0",
+    "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textarea": "^4.7.0",
     "@atlaskit/textfield": "^5.5.0",

package/report.api.md

@@ -52,7 +52,10 @@ interface CheckboxProps {
 }
 
 // @public
-export const ErrorMessage: React_2.FC<MessageProps>;
+export const ErrorMessage: ({
+  children,
+  testId,
+}: MessageProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 export function Field<
@@ -77,6 +80,7 @@ interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
   isRequired?: boolean;
   label?: ReactNode;
   name: string;
+  testId?: string;
   transform?: (
     event: FieldValue | FormEvent<Element>,
     current: FieldValue,
@@ -162,7 +166,11 @@ interface FormFooterProps {
 }
 
 // @public
-export const FormHeader: React.FC<FormHeaderProps>;
+export const FormHeader: ({
+  children,
+  description,
+  title,
+}: FormHeaderProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 interface FormHeaderProps {
@@ -188,7 +196,11 @@ export interface FormProps<FormValues> {
 }
 
 // @public
-export const FormSection: React_2.FC<FormSectionProps>;
+export const FormSection: ({
+  children,
+  description,
+  title,
+}: FormSectionProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 interface FormSectionProps {
@@ -198,7 +210,10 @@ interface FormSectionProps {
 }
 
 // @public
-export const HelperMessage: React_2.FC<MessageProps>;
+export const HelperMessage: ({
+  children,
+  testId,
+}: MessageProps) => jsx.JSX.Element;
 
 // @public
 interface InternalMessageProps {
@@ -220,6 +235,8 @@ export interface LabelProps {
   htmlFor: string;
   // (undocumented)
   id?: string;
+  // (undocumented)
+  testId?: string;
 }
 
 // @public (undocumented)
@@ -288,7 +305,10 @@ type SupportedElements =
   | HTMLTextAreaElement;
 
 // @public
-export const ValidMessage: React_2.FC<MessageProps>;
+export const ValidMessage: ({
+  children,
+  testId,
+}: MessageProps) => jsx.JSX.Element;
 
 // (No @packageDocumentation comment for this package)
 ```

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,256 @@
+## API Report File for "@atlaskit/form"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```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';
+
+// @public (undocumented)
+type Align = 'end' | 'start';
+
+// @public
+export const CheckboxField: FC<CheckboxProps>;
+
+// @public (undocumented)
+export interface CheckboxFieldProps extends FieldProps<string | undefined> {
+    // (undocumented)
+    isChecked: boolean;
+}
+
+// @public (undocumented)
+interface CheckboxProps {
+    children: (args: {
+        fieldProps: CheckboxFieldProps;
+        error?: string;
+        valid: boolean;
+        meta: Meta;
+    }) => ReactNode;
+    defaultIsChecked?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    label?: ReactNode;
+    name: string;
+    value?: string;
+}
+
+// @public
+export const ErrorMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+export function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
+
+// @public (undocumented)
+interface FieldComponentProps<FieldValue, Element extends SupportedElements> {
+    children: (args: {
+        fieldProps: FieldProps<FieldValue, Element>;
+        error?: string;
+        valid: boolean;
+        meta: Meta;
+    }) => ReactNode;
+    defaultValue?: ((currentDefaultValue?: FieldValue) => FieldValue) | FieldValue;
+    elementAfterLabel?: ReactNode;
+    id?: string;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    label?: ReactNode;
+    name: string;
+    testId?: string;
+    transform?: (event: FieldValue | FormEvent<Element>, current: FieldValue) => FieldValue;
+    validate?: (value: FieldValue | undefined, formState: Object, fieldState: Meta) => Promise<string | void> | string | void;
+}
+
+// @public (undocumented)
+export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {
+    // (undocumented)
+    'aria-invalid': 'false' | 'true';
+    // (undocumented)
+    'aria-labelledby': string;
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    isDisabled: boolean;
+    // (undocumented)
+    isInvalid: boolean;
+    // (undocumented)
+    isRequired: boolean;
+    // (undocumented)
+    name: string;
+    // (undocumented)
+    onBlur: () => void;
+    // (undocumented)
+    onChange: (value: FieldValue | FormEvent<Element>) => void;
+    // (undocumented)
+    onFocus: () => void;
+    // (undocumented)
+    value: FieldValue;
+}
+
+// @public
+export const Fieldset: ({ children, legend }: FieldsetProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+interface FieldsetProps {
+    children: ReactNode;
+    legend?: ReactNode;
+}
+
+// @public (undocumented)
+function Form<FormValues extends Record<string, any> = {}>(props: FormProps<FormValues>): JSX.Element;
+export default Form;
+
+// @public (undocumented)
+export type FormApi<FormData> = FormApi_2<FormData>;
+
+// @public (undocumented)
+interface FormChildrenProps {
+    // (undocumented)
+    onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>) => void;
+    // (undocumented)
+    onSubmit: (event?: React_2.FormEvent<HTMLFormElement> | React_2.SyntheticEvent<HTMLElement>) => void;
+    // (undocumented)
+    ref: React_2.RefObject<HTMLFormElement>;
+}
+
+// @public
+export function FormFooter({ align, children, }: FormFooterProps): jsx.JSX.Element;
+
+// @public (undocumented)
+interface FormFooterProps {
+    align?: Align;
+    children?: ReactNode;
+}
+
+// @public
+export const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+interface FormHeaderProps {
+    children?: ReactNode;
+    description?: ReactNode;
+    title?: ReactNode;
+}
+
+// @public (undocumented)
+export interface FormProps<FormValues> {
+    children: (args: {
+        formProps: FormChildrenProps;
+        disabled: boolean;
+        dirty: boolean;
+        submitting: boolean;
+        getState: () => FormState<FormValues>;
+        getValues: () => FormValues;
+        setFieldValue: (name: string, value: any) => void;
+        reset: (initialValues?: FormValues) => void;
+    }) => ReactNode;
+    isDisabled?: boolean;
+    onSubmit: OnSubmitHandler<FormValues>;
+}
+
+// @public
+export const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;
+
+// @public (undocumented)
+interface FormSectionProps {
+    children?: ReactNode;
+    description?: ReactNode;
+    title?: ReactNode;
+}
+
+// @public
+export const HelperMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
+
+// @public
+interface InternalMessageProps {
+    appearance?: MessageAppearance;
+    children: ReactNode;
+    // (undocumented)
+    fieldId?: string;
+    testId?: string;
+}
+
+// @public
+export const Label: FC<LabelProps>;
+
+// @public (undocumented)
+export interface LabelProps {
+    // (undocumented)
+    children: ReactNode;
+    // (undocumented)
+    htmlFor: string;
+    // (undocumented)
+    id?: string;
+    // (undocumented)
+    testId?: string;
+}
+
+// @public (undocumented)
+type MessageAppearance = 'default' | 'error' | 'valid';
+
+// @public
+type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
+
+// @public (undocumented)
+interface Meta {
+    // (undocumented)
+    dirty: boolean;
+    // (undocumented)
+    dirtySinceLastSubmit: boolean;
+    // (undocumented)
+    error?: string;
+    // (undocumented)
+    submitError?: boolean;
+    // (undocumented)
+    submitFailed: boolean;
+    // (undocumented)
+    submitting: boolean;
+    // (undocumented)
+    touched: boolean;
+    // (undocumented)
+    valid: boolean;
+    // (undocumented)
+    validating?: boolean;
+}
+
+// @public (undocumented)
+export type OnSubmitHandler<FormData> = (values: FormData, form: FormApi<FormData>, callback?: (errors?: Record<string, string>) => void) => Object | Promise<Object | void> | void;
+
+// @public
+export const RangeField: FC<RangeFieldProps>;
+
+// @public (undocumented)
+export interface RangeFieldProps {
+    // (undocumented)
+    children: (args: {
+        fieldProps: RangeProps;
+        error?: string;
+        meta: Meta;
+    }) => React_2.ReactNode;
+    defaultValue: ((currentDefaultValue?: number) => number) | number;
+    id?: string;
+    isDisabled?: boolean;
+    label?: ReactNode;
+    name: string;
+}
+
+// @public (undocumented)
+type RangeProps = Omit<FieldProps<number>, 'isInvalid' | 'isRequired'>;
+
+// @public (undocumented)
+export function RequiredAsterisk(): jsx.JSX.Element;
+
+// @public (undocumented)
+type SupportedElements = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+// @public
+export const ValidMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
+
+// (No @packageDocumentation comment for this package)
+
+```