@atlaskit/form 8.11.7 → 8.11.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/form
 
+## 8.11.9
+
+### Patch Changes
+
+- [`85935c8cde4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/85935c8cde4) - [ux] Denoting live region of form messages using aria-live attribute instead of alert role.
+
+## 8.11.8
+
+### Patch Changes
+
+- [`421b74bf0f9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/421b74bf0f9) - Combines stylings of label and legend for simpler maintenance.
+- [`215b4b5df50`](https://bitbucket.org/atlassian/atlassian-frontend/commits/215b4b5df50) - Removes redundant label from legend in fieldset.
+
 ## 8.11.7
 
 ### Patch Changes

package/dist/cjs/entry-points/label.js

@@ -1,13 +1,18 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "Label", {
   enumerable: true,
   get: function get() {
-    return _label.default;
+    return _label.Label;
   }
 });
-var _label = _interopRequireDefault(require("../label"));
+Object.defineProperty(exports, "Legend", {
+  enumerable: true,
+  get: function get() {
+    return _label.Legend;
+  }
+});
+var _label = require("../label");

package/dist/cjs/field.js

@@ -14,7 +14,7 @@ var _react2 = require("@emotion/react");
 var _reactUid = require("react-uid");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _form = require("./form");
-var _label = _interopRequireDefault(require("./label"));
+var _label = require("./label");
 var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /** @jsx jsx */
@@ -254,7 +254,7 @@ function Field(props) {
   return (0, _react2.jsx)("div", {
     css: fieldWrapperStyles,
     "data-testid": props.testId
-  }, props.label && (0, _react2.jsx)(_label.default, {
+  }, props.label && (0, _react2.jsx)(_label.Label, {
     htmlFor: fieldId,
     id: "".concat(fieldId, "-label"),
     testId: props.testId && "".concat(props.testId, "--label")

package/dist/cjs/fieldset.js

@@ -5,58 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 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");
-var _typography = require("@atlaskit/theme/typography");
+var _label = require("./label");
 /** @jsx jsx */
 
-var fontFamily = (0, _constants.fontFamily)();
-var fieldsetLabelStyles = (0, _react.css)({
-  display: 'inline-block',
-  marginTop: 0,
-  marginBottom: 0,
-  fontFamily: "".concat(fontFamily)
-});
 var fieldSetStyles = (0, _react.css)({
   marginTop: "var(--ds-space-100, 8px)"
 });
 
-/**
- * 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: (0, _components.themed)({
-      dark: "var(--ds-text-subtle, ".concat(_colors.DN300, ")"),
-      light: "var(--ds-text-subtle, ".concat(_colors.N200, ")")
-    })({
-      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;
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-    mode = _useGlobalTheme.mode;
-  return (0, _react.jsx)("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
-  }, children);
-};
-
 /**
  * __Fieldset__
  *
@@ -67,12 +22,12 @@ var FieldsetLabel = function FieldsetLabel(_ref) {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  */
-var Fieldset = function Fieldset(_ref2) {
-  var children = _ref2.children,
-    legend = _ref2.legend;
+var Fieldset = function Fieldset(_ref) {
+  var children = _ref.children,
+    legend = _ref.legend;
   return (0, _react.jsx)("fieldset", {
     css: fieldSetStyles
-  }, legend && (0, _react.jsx)("legend", null, (0, _react.jsx)(FieldsetLabel, null, legend)), children);
+  }, legend && (0, _react.jsx)(_label.Legend, null, legend), children);
 };
 var _default = Fieldset;
 exports.default = _default;

package/dist/cjs/form-header.js

@@ -30,13 +30,13 @@ var formHeaderWrapperStyles = (0, _react.css)({
   fontFamily: "".concat(fontFamily)
 });
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var darkH700Styles = (0, _react.css)((0, _typography.h700)({
   theme: {
     mode: 'dark'
   }
 }));
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var lightH700Styles = (0, _react.css)((0, _typography.h700)({
   theme: {
     mode: 'light'

package/dist/cjs/form-section.js

@@ -24,13 +24,13 @@ var formSectionWrapperStyles = (0, _react.css)({
   marginTop: "var(--ds-space-300, 24px)"
 });
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var lightH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var darkH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
     mode: 'dark'

package/dist/cjs/index.js

@@ -55,7 +55,13 @@ Object.defineProperty(exports, "HelperMessage", {
 Object.defineProperty(exports, "Label", {
   enumerable: true,
   get: function get() {
-    return _label.default;
+    return _label.Label;
+  }
+});
+Object.defineProperty(exports, "Legend", {
+  enumerable: true,
+  get: function get() {
+    return _label.Legend;
   }
 });
 Object.defineProperty(exports, "RangeField", {
@@ -89,7 +95,7 @@ var _formSection = _interopRequireDefault(require("./form-section"));
 var _field = _interopRequireDefault(require("./field"));
 var _checkboxField = _interopRequireDefault(require("./checkbox-field"));
 var _rangeField = _interopRequireDefault(require("./range-field"));
-var _label = _interopRequireDefault(require("./label"));
+var _label = require("./label");
 var _messages = require("./messages");
 var _fieldset = _interopRequireDefault(require("./fieldset"));
 var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));

package/dist/cjs/label.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Legend = exports.Label = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _components = require("@atlaskit/theme/components");
@@ -12,17 +12,12 @@ var _typography = require("@atlaskit/theme/typography");
 /** @jsx jsx */
 
 var fontFamily = (0, _constants.fontFamily)();
-var labelStyles = (0, _react.css)({
+var fieldsetLabelStyles = (0, _react.css)({
   display: 'inline-block',
   marginTop: 0,
   marginBottom: "var(--ds-space-050, 4px)",
   fontFamily: fontFamily
 });
-
-/**
- * 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: {
@@ -40,10 +35,10 @@ var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode)
   }]);
 };
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var lightH200Styles = getFieldsetLabelDynamicStyles('light');
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 
 /**
@@ -62,11 +57,27 @@ var Label = function Label(_ref) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
     mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles],
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
   }, children);
 };
+
+/**
+ * __Legend__
+ *
+ * A Legend represents a caption for a fieldset in a user interface.
+ */
+exports.Label = Label;
+var Legend = function Legend(_ref2) {
+  var children = _ref2.children;
+  var _useGlobalTheme2 = (0, _components.useGlobalTheme)(),
+    mode = _useGlobalTheme2.mode;
+  return (0, _react.jsx)("legend", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
+  }, children);
+};
+exports.Legend = Legend;
 var _default = Label;
 exports.default = _default;

package/dist/cjs/messages.js

@@ -25,13 +25,13 @@ var _field = require("./field");
 
 var fontFamily = (0, _constants.fontFamily)();
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/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
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var darkH200Styles = (0, _react.css)((0, _typography.h200)({
   theme: {
     mode: 'dark'
@@ -97,7 +97,7 @@ var Message = function Message(_ref2) {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
-    role: "alert"
+    "aria-live": "polite"
   }, icon && (0, _react.jsx)(IconWrapper, null, icon), content);
 };
 

package/dist/cjs/version.json

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

package/dist/es2019/entry-points/label.js

@@ -1 +1 @@
-export { default as Label } from '../label';
+export { Label, Legend } from '../label';

package/dist/es2019/field.js

@@ -4,7 +4,7 @@ import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { FormContext, IsDisabledContext } from './form';
-import Label from './label';
+import { Label } from './label';
 import RequiredAsterisk from './required-asterisk';
 const fieldWrapperStyles = css({
   marginTop: "var(--ds-space-100, 8px)"

package/dist/es2019/fieldset.js

@@ -1,56 +1,11 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-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();
-const fieldsetLabelStyles = css({
-  display: 'inline-block',
-  marginTop: 0,
-  marginBottom: 0,
-  fontFamily: `${fontFamily}`
-});
+import { Legend } from './label';
 const fieldSetStyles = css({
   marginTop: "var(--ds-space-100, 8px)"
 });
 
-/**
- * TODO: Address duplication with packages/design-system/form/src/label.tsx
- * in https://product-fabric.atlassian.net/browse/DSP-7731
- */
-const getFieldsetLabelDynamicStyles = mode => css([h200({
-  theme: {
-    mode
-  }
-}), {
-  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
-const lightH200Styles = getFieldsetLabelDynamicStyles('light');
-
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
-const FieldsetLabel = ({
-  children
-}) => {
-  const {
-    mode
-  } = useGlobalTheme();
-  return jsx("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
-  }, children);
-};
-
 /**
  * __Fieldset__
  *
@@ -67,6 +22,6 @@ const Fieldset = ({
 }) => {
   return jsx("fieldset", {
     css: fieldSetStyles
-  }, legend && jsx("legend", null, jsx(FieldsetLabel, null, legend)), children);
+  }, legend && jsx(Legend, null, legend), children);
 };
 export default Fieldset;

package/dist/es2019/form-header.js

@@ -24,13 +24,13 @@ const formHeaderWrapperStyles = css({
   fontFamily: `${fontFamily}`
 });
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const darkH700Styles = css(h700({
   theme: {
     mode: 'dark'
   }
 }));
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const lightH700Styles = css(h700({
   theme: {
     mode: 'light'

package/dist/es2019/form-section.js

@@ -18,13 +18,13 @@ const formSectionWrapperStyles = css({
   marginTop: "var(--ds-space-300, 24px)"
 });
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const lightH600Styles = css(h600({
   theme: {
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const darkH600Styles = css(h600({
   theme: {
     mode: 'dark'

package/dist/es2019/index.js

@@ -5,7 +5,7 @@ export { default as FormSection } from './form-section';
 export { default as Field } from './field';
 export { default as CheckboxField } from './checkbox-field';
 export { default as RangeField } from './range-field';
-export { default as Label } from './label';
+export { Label, Legend } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';

package/dist/es2019/label.js

@@ -6,17 +6,12 @@ import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 const fontFamily = getFontFamily();
-const labelStyles = css({
+const fieldsetLabelStyles = css({
   display: 'inline-block',
   marginTop: 0,
   marginBottom: "var(--ds-space-050, 4px)",
   fontFamily: fontFamily
 });
-
-/**
- * TODO: Address duplication with packages/design-system/form/src/fieldset.tsx
- * in https://product-fabric.atlassian.net/browse/DSP-7731
- */
 const getFieldsetLabelDynamicStyles = mode => css([h200({
   theme: {
     mode
@@ -32,10 +27,10 @@ const getFieldsetLabelDynamicStyles = mode => css([h200({
   })
 }]);
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const lightH200Styles = getFieldsetLabelDynamicStyles('light');
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 
 /**
@@ -46,7 +41,7 @@ const darkH200Styles = getFieldsetLabelDynamicStyles('dark');
  * It's recommended that a label has a `4px` spacing above its associated
  * control element.
  */
-const Label = ({
+export const Label = ({
   children,
   htmlFor,
   id,
@@ -56,10 +51,26 @@ const Label = ({
     mode
   } = useGlobalTheme();
   return jsx("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles],
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
   }, children);
 };
+
+/**
+ * __Legend__
+ *
+ * A Legend represents a caption for a fieldset in a user interface.
+ */
+export const Legend = ({
+  children
+}) => {
+  const {
+    mode
+  } = useGlobalTheme();
+  return jsx("legend", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
+  }, children);
+};
 export default Label;

package/dist/es2019/messages.js

@@ -19,13 +19,13 @@ import { FieldId } from './field';
 
 const fontFamily = getFontFamily();
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const lightH200Styles = css(h200({
   theme: {
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const darkH200Styles = css(h200({
   theme: {
     mode: 'dark'
@@ -93,7 +93,7 @@ const Message = ({
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
-    role: "alert"
+    "aria-live": "polite"
   }, icon && jsx(IconWrapper, null, icon), content);
 };
 

package/dist/es2019/version.json

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

package/dist/esm/entry-points/label.js

@@ -1 +1 @@
-export { default as Label } from '../label';
+export { Label, Legend } from '../label';

package/dist/esm/field.js

@@ -9,7 +9,7 @@ import { css, jsx } from '@emotion/react';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
 import { FormContext, IsDisabledContext } from './form';
-import Label from './label';
+import { Label } from './label';
 import RequiredAsterisk from './required-asterisk';
 var fieldWrapperStyles = css({
   marginTop: "var(--ds-space-100, 8px)"

package/dist/esm/fieldset.js

@@ -1,56 +1,11 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-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();
-var fieldsetLabelStyles = css({
-  display: 'inline-block',
-  marginTop: 0,
-  marginBottom: 0,
-  fontFamily: "".concat(fontFamily)
-});
+import { Legend } from './label';
 var fieldSetStyles = css({
   marginTop: "var(--ds-space-100, 8px)"
 });
 
-/**
- * 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: themed({
-      dark: "var(--ds-text-subtle, ".concat(DN300, ")"),
-      light: "var(--ds-text-subtle, ".concat(N200, ")")
-    })({
-      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;
-  var _useGlobalTheme = useGlobalTheme(),
-    mode = _useGlobalTheme.mode;
-  return jsx("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
-  }, children);
-};
-
 /**
  * __Fieldset__
  *
@@ -61,11 +16,11 @@ var FieldsetLabel = function FieldsetLabel(_ref) {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  */
-var Fieldset = function Fieldset(_ref2) {
-  var children = _ref2.children,
-    legend = _ref2.legend;
+var Fieldset = function Fieldset(_ref) {
+  var children = _ref.children,
+    legend = _ref.legend;
   return jsx("fieldset", {
     css: fieldSetStyles
-  }, legend && jsx("legend", null, jsx(FieldsetLabel, null, legend)), children);
+  }, legend && jsx(Legend, null, legend), children);
 };
 export default Fieldset;

package/dist/esm/form-header.js

@@ -24,13 +24,13 @@ var formHeaderWrapperStyles = css({
   fontFamily: "".concat(fontFamily)
 });
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var darkH700Styles = css(h700({
   theme: {
     mode: 'dark'
   }
 }));
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var lightH700Styles = css(h700({
   theme: {
     mode: 'light'

package/dist/esm/form-section.js

@@ -18,13 +18,13 @@ var formSectionWrapperStyles = css({
   marginTop: "var(--ds-space-300, 24px)"
 });
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var lightH600Styles = css(h600({
   theme: {
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var darkH600Styles = css(h600({
   theme: {
     mode: 'dark'

package/dist/esm/index.js

@@ -5,7 +5,7 @@ export { default as FormSection } from './form-section';
 export { default as Field } from './field';
 export { default as CheckboxField } from './checkbox-field';
 export { default as RangeField } from './range-field';
-export { default as Label } from './label';
+export { Label, Legend } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';

package/dist/esm/label.js

@@ -6,17 +6,12 @@ import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
 var fontFamily = getFontFamily();
-var labelStyles = css({
+var fieldsetLabelStyles = css({
   display: 'inline-block',
   marginTop: 0,
   marginBottom: "var(--ds-space-050, 4px)",
   fontFamily: fontFamily
 });
-
-/**
- * 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: {
@@ -34,10 +29,10 @@ var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode)
   }]);
 };
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var lightH200Styles = getFieldsetLabelDynamicStyles('light');
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 
 /**
@@ -48,7 +43,7 @@ var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
  * It's recommended that a label has a `4px` spacing above its associated
  * control element.
  */
-var Label = function Label(_ref) {
+export var Label = function Label(_ref) {
   var children = _ref.children,
     htmlFor = _ref.htmlFor,
     id = _ref.id,
@@ -56,10 +51,24 @@ var Label = function Label(_ref) {
   var _useGlobalTheme = useGlobalTheme(),
     mode = _useGlobalTheme.mode;
   return jsx("label", {
-    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles],
     id: id,
     htmlFor: htmlFor,
     "data-testid": testId
   }, children);
 };
+
+/**
+ * __Legend__
+ *
+ * A Legend represents a caption for a fieldset in a user interface.
+ */
+export var Legend = function Legend(_ref2) {
+  var children = _ref2.children;
+  var _useGlobalTheme2 = useGlobalTheme(),
+    mode = _useGlobalTheme2.mode;
+  return jsx("legend", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
+  }, children);
+};
 export default Label;

package/dist/esm/messages.js

@@ -19,13 +19,13 @@ import { FieldId } from './field';
 
 var fontFamily = getFontFamily();
 
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var lightH200Styles = css(h200({
   theme: {
     mode: 'light'
   }
 }));
-// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var darkH200Styles = css(h200({
   theme: {
     mode: 'dark'
@@ -91,7 +91,7 @@ var Message = function Message(_ref2) {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
-    role: "alert"
+    "aria-live": "polite"
   }, icon && jsx(IconWrapper, null, icon), content);
 };
 

package/dist/esm/version.json

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

package/dist/types/entry-points/label.d.ts

@@ -1,2 +1,2 @@
-export { default as Label } from '../label';
-export type { LabelProps } from '../label';
+export { Label, Legend } from '../label';
+export type { LabelProps, LegendProps } from '../label';

package/dist/types/index.d.ts

@@ -9,8 +9,8 @@ export { default as CheckboxField } from './checkbox-field';
 export type { CheckboxFieldProps } from './checkbox-field';
 export { default as RangeField } from './range-field';
 export type { RangeFieldProps } from './range-field';
-export { default as Label } from './label';
-export type { LabelProps } from './label';
+export { Label, Legend } from './label';
+export type { LabelProps, LegendProps } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';

package/dist/types/label.d.ts

@@ -6,6 +6,9 @@ export interface LabelProps {
     children: ReactNode;
     testId?: string;
 }
+export interface LegendProps {
+    children: ReactNode;
+}
 /**
  * __Label__
  *
@@ -14,5 +17,11 @@ export interface LabelProps {
  * It's recommended that a label has a `4px` spacing above its associated
  * control element.
  */
-declare const Label: FC<LabelProps>;
+export declare const Label: FC<LabelProps>;
+/**
+ * __Legend__
+ *
+ * A Legend represents a caption for a fieldset in a user interface.
+ */
+export declare const Legend: FC<LegendProps>;
 export default Label;

package/dist/types-ts4.5/entry-points/label.d.ts

@@ -1,2 +1,2 @@
-export { default as Label } from '../label';
-export type { LabelProps } from '../label';
+export { Label, Legend } from '../label';
+export type { LabelProps, LegendProps } from '../label';

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

@@ -9,8 +9,8 @@ export { default as CheckboxField } from './checkbox-field';
 export type { CheckboxFieldProps } from './checkbox-field';
 export { default as RangeField } from './range-field';
 export type { RangeFieldProps } from './range-field';
-export { default as Label } from './label';
-export type { LabelProps } from './label';
+export { Label, Legend } from './label';
+export type { LabelProps, LegendProps } from './label';
 export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
 export { default as Fieldset } from './fieldset';
 export { default as RequiredAsterisk } from './required-asterisk';

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

@@ -6,6 +6,9 @@ export interface LabelProps {
     children: ReactNode;
     testId?: string;
 }
+export interface LegendProps {
+    children: ReactNode;
+}
 /**
  * __Label__
  *
@@ -14,5 +17,11 @@ export interface LabelProps {
  * It's recommended that a label has a `4px` spacing above its associated
  * control element.
  */
-declare const Label: FC<LabelProps>;
+export declare const Label: FC<LabelProps>;
+/**
+ * __Legend__
+ *
+ * A Legend represents a caption for a fieldset in a user interface.
+ */
+export declare const Legend: FC<LegendProps>;
 export default Label;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.11.7",
+  "version": "8.11.9",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,30 +12,9 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlaskit:designLink": "https://atlassian.design/guidelines/product/patterns/forms",
-  "af:exports": {
-    "./CheckboxField": "./src/entry-points/checkbox-field.tsx",
-    "./Field": "./src/entry-points/field.tsx",
-    "./Fieldset": "./src/entry-points/fieldset.tsx",
-    "./FormFooter": "./src/entry-points/form-footer.tsx",
-    "./FormHeader": "./src/entry-points/form-header.tsx",
-    "./FormSection": "./src/entry-points/form-section.tsx",
-    "./Form": "./src/entry-points/form.tsx",
-    "./Messages": "./src/entry-points/messages.tsx",
-    "./RangeField": "./src/entry-points/range-field.tsx",
-    "./Label": "./src/entry-points/label.tsx",
-    ".": "./src/index.tsx"
-  },
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "continuous",
@@ -44,11 +23,10 @@
       "category": "Components"
     }
   },
-  "homepage": "https://atlassian.design/components/form/",
   "dependencies": {
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "final-form": "^4.20.1",
@@ -61,30 +39,22 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.7.0",
-    "@atlaskit/calendar": "^13.1.0",
+    "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/checkbox": "^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.6.0",
-    "@atlaskit/radio": "^5.6.0",
     "@atlaskit/range": "^7.1.0",
-    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textarea": "^4.7.0",
-    "@atlaskit/textfield": "^5.5.0",
-    "@atlaskit/toggle": "^12.6.0",
-    "@atlaskit/tooltip": "^17.8.0",
+    "@atlaskit/textfield": "^5.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",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
     "@types/final-form-focus": "^1.1.1",
+    "jest-in-case": "^1.0.2",
     "react-dom": "^16.8.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
@@ -120,5 +90,27 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "af:exports": {
+    "./CheckboxField": "./src/entry-points/checkbox-field.tsx",
+    "./Field": "./src/entry-points/field.tsx",
+    "./Fieldset": "./src/entry-points/fieldset.tsx",
+    "./FormFooter": "./src/entry-points/form-footer.tsx",
+    "./FormHeader": "./src/entry-points/form-header.tsx",
+    "./FormSection": "./src/entry-points/form-section.tsx",
+    "./Form": "./src/entry-points/form.tsx",
+    "./Messages": "./src/entry-points/messages.tsx",
+    "./RangeField": "./src/entry-points/range-field.tsx",
+    "./Label": "./src/entry-points/label.tsx",
+    ".": "./src/index.tsx"
+  },
+  "homepage": "https://atlassian.design/components/form/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -239,6 +239,15 @@ export interface LabelProps {
   testId?: string;
 }
 
+// @public
+export const Legend: FC<LegendProps>;
+
+// @public (undocumented)
+export interface LegendProps {
+  // (undocumented)
+  children: ReactNode;
+}
+
 // @public (undocumented)
 type MessageAppearance = 'default' | 'error' | 'valid';
 

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

@@ -190,6 +190,15 @@ export interface LabelProps {
     testId?: string;
 }
 
+// @public
+export const Legend: FC<LegendProps>;
+
+// @public (undocumented)
+export interface LegendProps {
+    // (undocumented)
+    children: ReactNode;
+}
+
 // @public (undocumented)
 type MessageAppearance = 'default' | 'error' | 'valid';