@atlaskit/form 8.8.2 → 8.8.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/form
 
+## 8.8.3
+
+### Patch Changes
+
+- [`1b8e257525f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b8e257525f) - [ux] Message content now preserves whitespace between elements.
+- [`ea1ad1d867f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea1ad1d867f) - Message typings have been corrected, removing a number of props. These props existed only in the type and had no effect when used.
+
+  The props which were removed from the typings are:
+
+  - `error`
+  - `fieldId`
+  - `valid`
+
+- [`b96e69cdf36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b96e69cdf36) - [ux] DSP-6625: Updated Form label text color token to match the design.
+
 ## 8.8.2
 
 ### Patch Changes

package/dist/cjs/fieldset.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = require("@emotion/react");
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -24,19 +26,30 @@ var fieldsetLabelStyles = (0, _react.css)({
 });
 var fieldSetStyles = (0, _react.css)({
   marginTop: "".concat(gridSize, "px")
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-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, _react.css)((0, _typography.h200)({
-  theme: {
-    mode: 'dark'
-  }
-}));
+});
+/**
+ * TODO: Address duplication with packages/design-system/form/src/label.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
+
+var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode) {
+  return (0, _react.css)([(0, _typography.h200)({
+    theme: {
+      mode: mode
+    }
+  }), {
+    color: "var(--ds-text-subtle, ".concat((0, _colors.subtleHeading)({
+      theme: {
+        mode: mode
+      }
+    }), ")")
+  }]);
+}; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+
+var lightH200Styles = getFieldsetLabelDynamicStyles('light'); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 
 var FieldsetLabel = function FieldsetLabel(_ref) {
   var children = _ref.children;

package/dist/cjs/label.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = require("@emotion/react");
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -21,19 +23,30 @@ var labelStyles = (0, _react.css)({
   marginTop: 0,
   marginBottom: gridSize / 2,
   fontFamily: fontFamily
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-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, _react.css)((0, _typography.h200)({
-  theme: {
-    mode: 'dark'
-  }
-}));
+});
+/**
+ * TODO: Address duplication with packages/design-system/form/src/fieldset.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
+
+var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode) {
+  return (0, _react.css)([(0, _typography.h200)({
+    theme: {
+      mode: mode
+    }
+  }), {
+    color: "var(--ds-text-subtle, ".concat((0, _colors.subtleHeading)({
+      theme: {
+        mode: mode
+      }
+    }), ")")
+  }]);
+}; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+
+var lightH200Styles = getFieldsetLabelDynamicStyles('light'); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 /**
  * __Label__
  *

package/dist/cjs/messages.js

@@ -40,15 +40,6 @@ var darkH200Styles = (0, _react2.css)((0, _typography.h200)({
     mode: 'dark'
   }
 }));
-var messageErrorColorStyles = (0, _react2.css)({
-  color: "var(--ds-text-danger, #AE2A19)"
-});
-var messageNeutralColorStyles = (0, _react2.css)({
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
-});
-var messageValidColorStyles = (0, _react2.css)({
-  color: "var(--ds-text-success, #216E4E)"
-});
 var messageStyles = (0, _react2.css)({
   display: 'flex',
   marginTop: "".concat(gridSize * 0.5, "px"),
@@ -56,6 +47,17 @@ var messageStyles = (0, _react2.css)({
   fontFamily: "".concat(fontFamily),
   fontWeight: 'normal'
 });
+var messageAppearanceStyles = {
+  default: (0, _react2.css)({
+    color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
+  }),
+  error: (0, _react2.css)({
+    color: "var(--ds-text-danger, #AE2A19)"
+  }),
+  valid: (0, _react2.css)({
+    color: "var(--ds-text-success, #216E4E)"
+  })
+};
 var iconWrapperStyles = (0, _react2.css)({
   display: 'flex'
 });
@@ -67,23 +69,44 @@ var IconWrapper = function IconWrapper(_ref) {
   }, children);
 };
 
+var messageIcons = {
+  error: (0, _react2.jsx)(_error.default, {
+    size: "small",
+    label: "error"
+  }),
+  valid: (0, _react2.jsx)(_success.default, {
+    size: "small",
+    label: "success"
+  })
+};
+
 var Message = function Message(_ref2) {
   var children = _ref2.children,
-      error = _ref2.error,
-      valid = _ref2.valid,
+      _ref2$appearance = _ref2.appearance,
+      appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
       fieldId = _ref2.fieldId,
       testId = _ref2.testId;
 
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
+  var icon = messageIcons[appearance];
+  /**
+   * The wrapping span is necessary to preserve spaces between children.
+   * Otherwise the flex layout of the message will remove any whitespace
+   * between children.
+   *
+   * 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", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId
-  }, children);
+  }, icon && (0, _react2.jsx)(IconWrapper, null, icon), content);
 };
-
 /**
  * __Helper message__
  *
@@ -91,6 +114,8 @@ var Message = function Message(_ref2) {
  * 'Password should be more than 4 characters'
  *
  */
+
+
 var HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
       testId = _ref3.testId;
@@ -117,13 +142,10 @@ var ErrorMessage = function ErrorMessage(_ref4) {
       testId = _ref4.testId;
   return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
     return (0, _react2.jsx)(Message, {
-      error: true,
+      appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
-    }, (0, _react2.jsx)(IconWrapper, null, (0, _react2.jsx)(_error.default, {
-      size: "small",
-      label: "error"
-    })), children);
+    }, children);
   });
 };
 /**
@@ -142,13 +164,10 @@ var ValidMessage = function ValidMessage(_ref5) {
       testId = _ref5.testId;
   return (0, _react2.jsx)(_field.FieldId.Consumer, null, function (fieldId) {
     return (0, _react2.jsx)(Message, {
+      appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
-      testId: testId,
-      valid: true
-    }, (0, _react2.jsx)(IconWrapper, null, (0, _react2.jsx)(_success.default, {
-      size: "small",
-      label: "success"
-    })), children);
+      testId: testId
+    }, children);
   });
 };
 

package/dist/cjs/version.json

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

package/dist/es2019/fieldset.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
@@ -13,19 +14,28 @@ const fieldsetLabelStyles = css({
 });
 const fieldSetStyles = css({
   marginTop: `${gridSize}px`
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
+/**
+ * TODO: Address duplication with packages/design-system/form/src/label.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
 
-const lightH200Styles = css(h200({
+const getFieldsetLabelDynamicStyles = mode => css([h200({
   theme: {
-    mode: 'light'
+    mode
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+}), {
+  color: `var(--ds-text-subtle, ${subtleHeading({
+    theme: {
+      mode
+    }
+  })})`
+}]); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-const darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
+
+const lightH200Styles = getFieldsetLabelDynamicStyles('light'); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 
 const FieldsetLabel = ({
   children

package/dist/es2019/label.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
@@ -10,19 +11,28 @@ const labelStyles = css({
   marginTop: 0,
   marginBottom: gridSize / 2,
   fontFamily: fontFamily
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
+/**
+ * TODO: Address duplication with packages/design-system/form/src/fieldset.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
 
-const lightH200Styles = css(h200({
+const getFieldsetLabelDynamicStyles = mode => css([h200({
   theme: {
-    mode: 'light'
+    mode
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+}), {
+  color: `var(--ds-text-subtle, ${subtleHeading({
+    theme: {
+      mode
+    }
+  })})`
+}]); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
-const darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
+
+const lightH200Styles = getFieldsetLabelDynamicStyles('light'); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 /**
  * __Label__
  *

package/dist/es2019/messages.js

@@ -22,15 +22,6 @@ const darkH200Styles = css(h200({
     mode: 'dark'
   }
 }));
-const messageErrorColorStyles = css({
-  color: "var(--ds-text-danger, #AE2A19)"
-});
-const messageNeutralColorStyles = css({
-  color: `var(--ds-text-subtlest, ${N200})`
-});
-const messageValidColorStyles = css({
-  color: "var(--ds-text-success, #216E4E)"
-});
 const messageStyles = css({
   display: 'flex',
   marginTop: `${gridSize * 0.5}px`,
@@ -38,6 +29,17 @@ const messageStyles = css({
   fontFamily: `${fontFamily}`,
   fontWeight: 'normal'
 });
+const messageAppearanceStyles = {
+  default: css({
+    color: `var(--ds-text-subtlest, ${N200})`
+  }),
+  error: css({
+    color: "var(--ds-text-danger, #AE2A19)"
+  }),
+  valid: css({
+    color: "var(--ds-text-success, #216E4E)"
+  })
+};
 const iconWrapperStyles = css({
   display: 'flex'
 });
@@ -50,23 +52,43 @@ const IconWrapper = ({
   }, children);
 };
 
+const messageIcons = {
+  error: jsx(ErrorIcon, {
+    size: "small",
+    label: "error"
+  }),
+  valid: jsx(SuccessIcon, {
+    size: "small",
+    label: "success"
+  })
+};
+
 const Message = ({
   children,
-  error,
-  valid,
+  appearance = 'default',
   fieldId,
   testId
 }) => {
   const {
     mode
   } = useGlobalTheme();
+  const icon = messageIcons[appearance];
+  /**
+   * The wrapping span is necessary to preserve spaces between children.
+   * Otherwise the flex layout of the message will remove any whitespace
+   * between children.
+   *
+   * If the child is just a string, this is not required and we can use one
+   * less DOM element.
+   */
+
+  const content = typeof children === 'string' ? children : jsx("span", null, children);
   return jsx("div", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId
-  }, children);
+  }, icon && jsx(IconWrapper, null, icon), content);
 };
-
 /**
  * __Helper message__
  *
@@ -74,6 +96,8 @@ const Message = ({
  * 'Password should be more than 4 characters'
  *
  */
+
+
 export const HelperMessage = ({
   children,
   testId
@@ -93,13 +117,10 @@ export const ErrorMessage = ({
   children,
   testId
 }) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
-  error: true,
+  appearance: "error",
   fieldId: fieldId ? `${fieldId}-error` : undefined,
   testId: testId
-}, jsx(IconWrapper, null, jsx(ErrorIcon, {
-  size: "small",
-  label: "error"
-})), children));
+}, children));
 /**
  * __Valid message__
  *
@@ -112,10 +133,7 @@ export const ValidMessage = ({
   children,
   testId
 }) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
+  appearance: "valid",
   fieldId: fieldId ? `${fieldId}-valid` : undefined,
-  testId: testId,
-  valid: true
-}, jsx(IconWrapper, null, jsx(SuccessIcon, {
-  size: "small",
-  label: "success"
-})), children));
+  testId: testId
+}, children));

package/dist/es2019/version.json

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

package/dist/esm/fieldset.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
@@ -13,19 +14,30 @@ var fieldsetLabelStyles = css({
 });
 var fieldSetStyles = css({
   marginTop: "".concat(gridSize, "px")
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var lightH200Styles = css(h200({
-  theme: {
-    mode: 'light'
-  }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
+});
+/**
+ * TODO: Address duplication with packages/design-system/form/src/label.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
+
+var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode) {
+  return css([h200({
+    theme: {
+      mode: mode
+    }
+  }), {
+    color: "var(--ds-text-subtle, ".concat(subtleHeading({
+      theme: {
+        mode: mode
+      }
+    }), ")")
+  }]);
+}; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+
+var lightH200Styles = getFieldsetLabelDynamicStyles('light'); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 
 var FieldsetLabel = function FieldsetLabel(_ref) {
   var children = _ref.children;

package/dist/esm/label.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
+import { subtleHeading } from '@atlaskit/theme/colors';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
@@ -10,19 +11,30 @@ var labelStyles = css({
   marginTop: 0,
   marginBottom: gridSize / 2,
   fontFamily: fontFamily
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var lightH200Styles = css(h200({
-  theme: {
-    mode: 'light'
-  }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var darkH200Styles = css(h200({
-  theme: {
-    mode: 'dark'
-  }
-}));
+});
+/**
+ * TODO: Address duplication with packages/design-system/form/src/fieldset.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
+
+var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode) {
+  return css([h200({
+    theme: {
+      mode: mode
+    }
+  }), {
+    color: "var(--ds-text-subtle, ".concat(subtleHeading({
+      theme: {
+        mode: mode
+      }
+    }), ")")
+  }]);
+}; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+
+var lightH200Styles = getFieldsetLabelDynamicStyles('light'); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 /**
  * __Label__
  *

package/dist/esm/messages.js

@@ -22,15 +22,6 @@ var darkH200Styles = css(h200({
     mode: 'dark'
   }
 }));
-var messageErrorColorStyles = css({
-  color: "var(--ds-text-danger, #AE2A19)"
-});
-var messageNeutralColorStyles = css({
-  color: "var(--ds-text-subtlest, ".concat(N200, ")")
-});
-var messageValidColorStyles = css({
-  color: "var(--ds-text-success, #216E4E)"
-});
 var messageStyles = css({
   display: 'flex',
   marginTop: "".concat(gridSize * 0.5, "px"),
@@ -38,6 +29,17 @@ var messageStyles = css({
   fontFamily: "".concat(fontFamily),
   fontWeight: 'normal'
 });
+var messageAppearanceStyles = {
+  default: css({
+    color: "var(--ds-text-subtlest, ".concat(N200, ")")
+  }),
+  error: css({
+    color: "var(--ds-text-danger, #AE2A19)"
+  }),
+  valid: css({
+    color: "var(--ds-text-success, #216E4E)"
+  })
+};
 var iconWrapperStyles = css({
   display: 'flex'
 });
@@ -49,23 +51,44 @@ var IconWrapper = function IconWrapper(_ref) {
   }, children);
 };
 
+var messageIcons = {
+  error: jsx(ErrorIcon, {
+    size: "small",
+    label: "error"
+  }),
+  valid: jsx(SuccessIcon, {
+    size: "small",
+    label: "success"
+  })
+};
+
 var Message = function Message(_ref2) {
   var children = _ref2.children,
-      error = _ref2.error,
-      valid = _ref2.valid,
+      _ref2$appearance = _ref2.appearance,
+      appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
       fieldId = _ref2.fieldId,
       testId = _ref2.testId;
 
   var _useGlobalTheme = useGlobalTheme(),
       mode = _useGlobalTheme.mode;
 
+  var icon = messageIcons[appearance];
+  /**
+   * The wrapping span is necessary to preserve spaces between children.
+   * Otherwise the flex layout of the message will remove any whitespace
+   * between children.
+   *
+   * 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 : jsx("span", null, children);
   return jsx("div", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId
-  }, children);
+  }, icon && jsx(IconWrapper, null, icon), content);
 };
-
 /**
  * __Helper message__
  *
@@ -73,6 +96,8 @@ var Message = function Message(_ref2) {
  * 'Password should be more than 4 characters'
  *
  */
+
+
 export var HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
       testId = _ref3.testId;
@@ -96,13 +121,10 @@ export var ErrorMessage = function ErrorMessage(_ref4) {
       testId = _ref4.testId;
   return jsx(FieldId.Consumer, null, function (fieldId) {
     return jsx(Message, {
-      error: true,
+      appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
-    }, jsx(IconWrapper, null, jsx(ErrorIcon, {
-      size: "small",
-      label: "error"
-    })), children);
+    }, children);
   });
 };
 /**
@@ -118,12 +140,9 @@ export var ValidMessage = function ValidMessage(_ref5) {
       testId = _ref5.testId;
   return jsx(FieldId.Consumer, null, function (fieldId) {
     return jsx(Message, {
+      appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
-      testId: testId,
-      valid: true
-    }, jsx(IconWrapper, null, jsx(SuccessIcon, {
-      size: "small",
-      label: "success"
-    })), children);
+      testId: testId
+    }, children);
   });
 };

package/dist/esm/version.json

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

package/dist/types/messages.d.ts

@@ -1,6 +1,10 @@
 /** @jsx jsx */
 import React, { ReactNode } from 'react';
-interface MessageProps {
+declare type MessageAppearance = 'default' | 'error' | 'valid';
+/**
+ * API for the internal `<Message />` component. This is not public API.
+ */
+interface InternalMessageProps {
     /**
      * The content of the message
      */
@@ -12,15 +16,15 @@ interface MessageProps {
      */
     testId?: string;
     /**
-     * Checks whether message input is invalid and should show an error.
-     */
-    error?: boolean;
-    /**
-     * Checks whether message input is valid.
+     * Determines the appearance of the message.
      */
-    valid?: boolean;
+    appearance?: MessageAppearance;
     fieldId?: string;
 }
+/**
+ * Public API of the various message components.
+ */
+declare type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
 /**
  * __Helper message__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.8.2",
+  "version": "8.8.3",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -62,11 +62,12 @@
     "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/droplist": "^11.0.0",
     "@atlaskit/ds-lib": "^2.1.1",
+    "@atlaskit/lozenge": "^11.2.4",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
     "@atlaskit/section-message": "^6.3.0",
-    "@atlaskit/select": "^16.0.0",
+    "@atlaskit/select": "^16.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textarea": "^4.5.0",
     "@atlaskit/textfield": "^5.3.0",

package/report.api.md

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/form"
 
@@ -199,6 +199,15 @@ interface FormSectionProps {
 // @public
 export const HelperMessage: React_2.FC<MessageProps>;
 
+// @public
+interface InternalMessageProps {
+  appearance?: MessageAppearance;
+  children: ReactNode;
+  // (undocumented)
+  fieldId?: string;
+  testId?: string;
+}
+
 // @public
 export const Label: FC<LabelProps>;
 
@@ -211,14 +220,10 @@ export interface LabelProps {
 }
 
 // @public (undocumented)
-interface MessageProps {
-  children: ReactNode;
-  error?: boolean;
-  // (undocumented)
-  fieldId?: string;
-  testId?: string;
-  valid?: boolean;
-}
+type MessageAppearance = 'default' | 'error' | 'valid';
+
+// @public
+type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
 
 // @public (undocumented)
 interface Meta {