@atlaskit/form 8.8.2 → 8.8.4

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/form
 
+## 8.8.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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/checkbox-field.js

@@ -1,40 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _field = _interopRequireDefault(require("./field"));
-
 var _excluded = ["children", "defaultIsChecked", "value"],
-    _excluded2 = ["value"],
-    _excluded3 = ["fieldProps"],
-    _excluded4 = ["value"],
-    _excluded5 = ["fieldProps"];
-
+  _excluded2 = ["value"],
+  _excluded3 = ["fieldProps"],
+  _excluded4 = ["value"],
+  _excluded5 = ["fieldProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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; }
-
 /**
  * __Checkbox field__
  *
@@ -46,11 +32,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var CheckboxField = function CheckboxField(props) {
   var children = props.children,
-      _props$defaultIsCheck = props.defaultIsChecked,
-      defaultIsChecked = _props$defaultIsCheck === void 0 ? false : _props$defaultIsCheck,
-      value = props.value,
-      rest = (0, _objectWithoutProperties2.default)(props, _excluded); // Maintains a memoised list of the default values
+    _props$defaultIsCheck = props.defaultIsChecked,
+    defaultIsChecked = _props$defaultIsCheck === void 0 ? false : _props$defaultIsCheck,
+    value = props.value,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
+  // Maintains a memoised list of the default values
   var defaultValue = (0, _react.useCallback)(function () {
     var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return defaultIsChecked && value !== undefined ? [].concat((0, _toConsumableArray2.default)(currentValue), [value]) : currentValue;
@@ -64,9 +51,9 @@ var CheckboxField = function CheckboxField(props) {
     }
   }), function (_ref) {
     var _ref$fieldProps = _ref.fieldProps,
-        fieldValue = _ref$fieldProps.value,
-        otherFieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
-        others = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
+      fieldValue = _ref$fieldProps.value,
+      otherFieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
         isChecked: !!fieldValue.find(function (v) {
@@ -82,9 +69,9 @@ var CheckboxField = function CheckboxField(props) {
     }
   }), function (_ref2) {
     var _ref2$fieldProps = _ref2.fieldProps,
-        fieldValue = _ref2$fieldProps.value,
-        otherFieldProps = (0, _objectWithoutProperties2.default)(_ref2$fieldProps, _excluded4),
-        others = (0, _objectWithoutProperties2.default)(_ref2, _excluded5);
+      fieldValue = _ref2$fieldProps.value,
+      otherFieldProps = (0, _objectWithoutProperties2.default)(_ref2$fieldProps, _excluded4),
+      others = (0, _objectWithoutProperties2.default)(_ref2, _excluded5);
     return children(_objectSpread({
       fieldProps: _objectSpread(_objectSpread({}, otherFieldProps), {}, {
         isChecked: fieldValue,
@@ -93,7 +80,6 @@ var CheckboxField = function CheckboxField(props) {
     }, others));
   });
 };
-
 CheckboxField.defaultProps = {
   defaultIsChecked: false
 };

package/dist/cjs/entry-points/checkbox-field.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "CheckboxField", {
     return _checkboxField.default;
   }
 });
-
 var _checkboxField = _interopRequireDefault(require("../checkbox-field"));

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _field.default;
   }
 });
-
 var _field = _interopRequireDefault(require("../field"));

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "Fieldset", {
     return _fieldset.default;
   }
 });
-
 var _fieldset = _interopRequireDefault(require("../fieldset"));

package/dist/cjs/entry-points/form-footer.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "FormFooter", {
     return _formFooter.default;
   }
 });
-
 var _formFooter = _interopRequireDefault(require("../form-footer"));

package/dist/cjs/entry-points/form-header.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "FormHeader", {
     return _formHeader.default;
   }
 });
-
 var _formHeader = _interopRequireDefault(require("../form-header"));

package/dist/cjs/entry-points/form-section.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "FormSection", {
     return _formSection.default;
   }
 });
-
 var _formSection = _interopRequireDefault(require("../form-section"));

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _form.default;
   }
 });
-
 var _form = _interopRequireDefault(require("../form"));

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "Label", {
     return _label.default;
   }
 });
-
 var _label = _interopRequireDefault(require("../label"));

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

@@ -21,5 +21,4 @@ Object.defineProperty(exports, "ValidMessage", {
     return _messages.ValidMessage;
   }
 });
-
 var _messages = require("../messages");

package/dist/cjs/entry-points/range-field.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "RangeField", {
     return _rangeField.default;
   }
 });
-
 var _rangeField = _interopRequireDefault(require("../range-field"));

package/dist/cjs/field.js

@@ -1,39 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldId = void 0;
 exports.default = Field;
-
 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 = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _reactUid = require("react-uid");
-
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _form = require("./form");
-
 var _label = _interopRequireDefault(require("./label"));
-
 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; }
-
 var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)();
 var fieldWrapperStyles = (0, _react2.css)({
@@ -44,15 +29,12 @@ var requiredIndicatorStyles = (0, _react2.css)({
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   fontFamily: fontFamily
 });
-
 function isEvent(event) {
   return Boolean(event && event.target);
 }
-
 function isFunction(x) {
   return typeof x === 'function';
 }
-
 /**
  * __Field id__
  *
@@ -60,99 +42,89 @@ function isFunction(x) {
  */
 var FieldId = /*#__PURE__*/(0, _react.createContext)(undefined);
 exports.FieldId = FieldId;
-
 function usePreviousRef(current) {
-  var ref = (0, _react.useRef)(current); // will be updated on the next render
+  var ref = (0, _react.useRef)(current);
 
+  // will be updated on the next render
   (0, _react.useEffect)(function () {
     ref.current = current;
-  }); // return the existing current (pre render)
+  });
 
+  // return the existing current (pre render)
   return ref;
 }
-
 function isShallowEqual(previousValue, currentValue) {
   if (previousValue === currentValue) {
     return true;
-  } // not checking functions
-
+  }
 
+  // not checking functions
   if (typeof previousValue === 'function' && typeof currentValue === 'function') {
     return true;
   }
-
   if (Array.isArray(previousValue) && Array.isArray(currentValue)) {
     return JSON.stringify(previousValue) === JSON.stringify(currentValue);
   }
-
   if ((0, _typeof2.default)(previousValue) === 'object' && (0, _typeof2.default)(currentValue) === 'object') {
     return JSON.stringify(previousValue) === JSON.stringify(currentValue);
   }
-
   return false;
 }
-
 function Field(props) {
   var _getCurrentValue;
-
   var _useContext = (0, _react.useContext)(_form.FormContext),
-      registerField = _useContext.registerField,
-      getCurrentValue = _useContext.getCurrentValue;
-
+    registerField = _useContext.registerField,
+    getCurrentValue = _useContext.getCurrentValue;
   var isDisabled = (0, _react.useContext)(_form.IsDisabledContext) || props.isDisabled || false;
   var defaultValue = isFunction(props.defaultValue) ? props.defaultValue() : props.defaultValue;
   var latestPropsRef = usePreviousRef(props);
+
   /**
    * HACK: defaultValue can potentially be an array or object which cannot be
    * passed directly into a `useEffect` dependency array, since it will trigger
    * the hook every time.
    */
-
   var isDefaultValueChanged = !isShallowEqual(latestPropsRef.current.defaultValue, props.defaultValue);
-
   var _useState = (0, _react.useState)({
-    fieldProps: {
-      onChange: function onChange() {},
-      onBlur: function onBlur() {},
-      onFocus: function onFocus() {},
-
-      /* Previously, defaultValue was being set as undefined in Field.defaultProps, which
-       * effectively made it an optional prop to external consumers of Field. However the
-       * prop types defined defaultValue as required, so inside the component it was not
-       * valid for defaultValue to be undefined. We need to suppress the error
-       * after changing defaultValue to explictly be an optional prop.
-       * If default value has changed we are using new default value.
-       * Otherwise we need to check if we already have value for this field
-       * (because we are using changing key prop to re-run field level validation, and that
-       * cause the component re-mounting) to not override the actual value with the default value.
-       */
-      // @ts-ignore
-      value: isDefaultValueChanged ? defaultValue : (_getCurrentValue = getCurrentValue(props.name)) !== null && _getCurrentValue !== void 0 ? _getCurrentValue : defaultValue
-    },
-    error: undefined,
-    valid: false,
-    meta: {
-      dirty: false,
-      dirtySinceLastSubmit: false,
-      touched: false,
-      valid: false,
-      validating: false,
-      submitting: false,
-      submitFailed: false,
+      fieldProps: {
+        onChange: function onChange() {},
+        onBlur: function onBlur() {},
+        onFocus: function onFocus() {},
+        /* Previously, defaultValue was being set as undefined in Field.defaultProps, which
+         * effectively made it an optional prop to external consumers of Field. However the
+         * prop types defined defaultValue as required, so inside the component it was not
+         * valid for defaultValue to be undefined. We need to suppress the error
+         * after changing defaultValue to explictly be an optional prop.
+         * If default value has changed we are using new default value.
+         * Otherwise we need to check if we already have value for this field
+         * (because we are using changing key prop to re-run field level validation, and that
+         * cause the component re-mounting) to not override the actual value with the default value.
+         */
+        // @ts-ignore
+        value: isDefaultValueChanged ? defaultValue : (_getCurrentValue = getCurrentValue(props.name)) !== null && _getCurrentValue !== void 0 ? _getCurrentValue : defaultValue
+      },
       error: undefined,
-      submitError: undefined
-    }
-  }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      state = _useState2[0],
-      setState = _useState2[1];
-
+      valid: false,
+      meta: {
+        dirty: false,
+        dirtySinceLastSubmit: false,
+        touched: false,
+        valid: false,
+        validating: false,
+        submitting: false,
+        submitFailed: false,
+        error: undefined,
+        submitError: undefined
+      }
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
   var latestStateRef = usePreviousRef(state);
   (0, _react.useEffect)(function () {
     if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
       (0, _tinyInvariant.default)(latestPropsRef.current.name, '@atlaskit/form: Field components have a required name prop');
     }
-
     function fieldStateToMeta() {
       var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       return {
@@ -167,7 +139,6 @@ function Field(props) {
         validating: !!value.validating
       };
     }
-
     var unregister = registerField(latestPropsRef.current.name,
     /**
      * Similar as for setting initial state value.
@@ -178,45 +149,42 @@ function Field(props) {
      * the key prop to re-run validation.
      */
     // @ts-ignore
-    isDefaultValueChanged || // @ts-ignore
+    isDefaultValueChanged ||
+    // @ts-ignore
     isFunction(latestPropsRef.current.defaultValue) ? latestPropsRef.current.defaultValue : latestStateRef.current.fieldProps.value, function (fieldState) {
       /**
        * Do not update dirtySinceLastSubmit until submission has finished.
        */
       var modifiedDirtySinceLastSubmit = fieldState.submitting ? latestStateRef.current.meta.dirtySinceLastSubmit : fieldState.dirtySinceLastSubmit;
+
       /**
        * Do not update submitFailed until submission has finished.
        */
-
       var modifiedSubmitFailed = fieldState.submitting ? latestStateRef.current.meta.submitFailed : fieldState.submitFailed;
+
       /**
        * Do not use submitError if the value has changed.
        */
-
       var modifiedSubmitError = modifiedDirtySinceLastSubmit && latestPropsRef.current.validate ? undefined : fieldState.submitError;
       var modifiedError = modifiedSubmitError || (fieldState.touched || fieldState.dirty) && fieldState.error;
+
       /**
        * If there has been a submit error, then use logic in modifiedError to determine validity,
        * so we can determine when there is a submit error which we do not want to display
        * because the value has been changed.
        */
-
       var modifiedValid = modifiedSubmitFailed ? modifiedError === undefined : fieldState.valid;
-
       function getTransform(eventOrValue, currentValue) {
         if (latestPropsRef.current.transform) {
           return latestPropsRef.current.transform(eventOrValue, currentValue);
         }
-
         if (isEvent(eventOrValue)) {
           var currentTarget = eventOrValue.currentTarget;
-
           if (currentTarget.type === 'checkbox') {
             //@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
             if (currentTarget.checked) {
               return currentTarget.value || true;
             }
-
             return currentTarget.value ? undefined : false;
           } else if (currentTarget) {
             return currentTarget.value;
@@ -225,7 +193,6 @@ function Field(props) {
           return eventOrValue;
         }
       }
-
       setState({
         fieldProps: {
           onChange: function onChange(e) {
@@ -236,7 +203,6 @@ function Field(props) {
           value: fieldState.value
         },
         error: modifiedError || undefined,
-
         /**
          * The following parameters are optionally typed in final-form to indicate that not all parameters need
          * to be subscribed to. We cast them as booleans (using || false), since this is what they are semantically.
@@ -259,7 +225,6 @@ function Field(props) {
       getValidator: function getValidator() {
         return function validate(value, formState, fieldState) {
           var supplied = latestPropsRef.current.validate;
-
           if (supplied && fieldState) {
             return supplied(value, formState, fieldStateToMeta(fieldState));
           }
@@ -268,13 +233,13 @@ function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, isDefaultValueChanged]);
-  var fieldId = (0, _react.useMemo)( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  var fieldId = (0, _react.useMemo)(
+  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
   function () {
     return props.id ? props.id : "".concat(props.name, "-").concat((0, _reactUid.uid)({
       id: props.name
     }));
   }, [props.id, props.name]);
-
   var extendedFieldProps = _objectSpread(_objectSpread({}, state.fieldProps), {}, {
     name: props.name,
     isDisabled: isDisabled,
@@ -284,7 +249,6 @@ function Field(props) {
     'aria-labelledby': "".concat(fieldId, "-label ").concat(fieldId, "-helper ").concat(fieldId, "-valid ").concat(fieldId, "-error"),
     id: fieldId
   });
-
   return (0, _react2.jsx)("div", {
     css: fieldWrapperStyles
   }, props.label && (0, _react2.jsx)(_label.default, {

package/dist/cjs/fieldset.js

@@ -4,16 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
-
 /** @jsx jsx */
+
 var fontFamily = (0, _constants.fontFamily)();
 var gridSize = (0, _constants.gridSize)();
 var fieldsetLabelStyles = (0, _react.css)({
@@ -24,30 +21,40 @@ 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
+/**
+ * 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
+      }
+    }), ")")
+  }]);
+};
 
-var darkH200Styles = (0, _react.css)((0, _typography.h200)({
-  theme: {
-    mode: 'dark'
-  }
-}));
+// 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;
-
+    mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("label", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
   }, children);
 };
+
 /**
  * __Fieldset__
  *
@@ -58,15 +65,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;
+    legend = _ref2.legend;
   return (0, _react.jsx)("fieldset", {
     css: fieldSetStyles
   }, legend && (0, _react.jsx)("legend", null, (0, _react.jsx)(FieldsetLabel, null, legend)), children);
 };
-
 var _default = Fieldset;
 exports.default = _default;