@atlaskit/form 11.0.0 → 11.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/form
 
+## 11.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.0.0
 
 ### Major Changes

package/dist/cjs/field.js

@@ -1,30 +1,29 @@
-/* field.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Field;
-require("./field.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _fieldIdContext = require("./field-id-context");
 var _form = require("./form");
 var _label = require("./label");
 var _requiredAsterisk = _interopRequireDefault(require("./required-asterisk"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var fieldWrapperStyles = null;
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var fieldWrapperStyles = (0, _react2.css)({
+  marginBlockStart: "var(--ds-space-100, 8px)"
+});
 function isEvent(event) {
   return Boolean(event && event.target);
 }
@@ -245,14 +244,14 @@ function Field(props) {
     'aria-labelledby': "".concat(fieldId, "-label"),
     id: fieldId
   });
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": props.testId,
-    className: (0, _runtime.ax)(["_1pfhu2gc"])
-  }, props.label && /*#__PURE__*/React.createElement(_label.Label, {
+  return (0, _react2.jsx)("div", {
+    css: fieldWrapperStyles,
+    "data-testid": props.testId
+  }, props.label && (0, _react2.jsx)(_label.Label, {
     htmlFor: fieldId,
     id: "".concat(fieldId, "-label"),
     testId: props.testId && "".concat(props.testId, "--label")
-  }, props.label, props.isRequired && /*#__PURE__*/React.createElement(_requiredAsterisk.default, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Provider, {
+  }, props.label, props.isRequired && (0, _react2.jsx)(_requiredAsterisk.default, null), props.elementAfterLabel), (0, _react2.jsx)(_fieldIdContext.FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/cjs/fieldset.js

@@ -1,18 +1,21 @@
-/* fieldset.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("./fieldset.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
+var _react = require("@emotion/react");
 var _label = require("./label");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var fieldSetStyles = null;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var fieldSetStyles = (0, _react.css)({
+  marginBlockStart: "var(--ds-space-100, 8px)"
+});
 
 /**
  * __Fieldset__
@@ -27,8 +30,8 @@ var fieldSetStyles = null;
 var Fieldset = function Fieldset(_ref) {
   var children = _ref.children,
     legend = _ref.legend;
-  return /*#__PURE__*/React.createElement("fieldset", {
-    className: (0, _runtime.ax)(["_1pfhu2gc"])
-  }, legend && /*#__PURE__*/React.createElement(_label.Legend, null, legend), children);
+  return (0, _react.jsx)("fieldset", {
+    css: fieldSetStyles
+  }, legend && (0, _react.jsx)(_label.Legend, null, legend), children);
 };
 var _default = exports.default = Fieldset;

package/dist/cjs/form-footer.js

@@ -1,22 +1,25 @@
-/* form-footer.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FormFooter;
-require("./form-footer.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var formFooterWrapperStyles = {
-  root: "_1e0c1txw _1bahesu3 _1pfh1ejb"
-};
-var justifyContentStyles = {
-  root: "_1bah1y6m"
-};
+var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var formFooterWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  marginBlockStart: "var(--ds-space-300, 24px)"
+});
+var justifyContentStyles = (0, _react.css)({
+  justifyContent: 'flex-start'
+});
 
 /**
  * __Form footer__
@@ -31,7 +34,7 @@ function FormFooter(_ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'end' : _ref$align,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement("footer", {
-    className: (0, _runtime.ax)([formFooterWrapperStyles.root, align === 'start' && justifyContentStyles.root])
+  return (0, _react.jsx)("footer", {
+    css: [formFooterWrapperStyles, align === 'start' && justifyContentStyles]
   }, children);
 }

package/dist/cjs/form-header.js

@@ -1,4 +1,3 @@
-/* form-header.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,17 +5,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("./form-header.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _compiled = require("@atlaskit/primitives/compiled");
-var formHeaderContentStyles = {
-  root: "_1ul91osq _1pfhu2gc"
-};
-var formHeaderDescriptionStyles = {
-  root: "_1pfhu2gc"
-};
+var _primitives = require("@atlaskit/primitives");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var formHeaderContentStyles = (0, _primitives.xcss)({
+  minWidth: '100%',
+  marginBlockStart: 'space.100'
+});
+var formHeaderDescriptionStyles = (0, _primitives.xcss)({
+  marginBlockStart: 'space.100'
+});
 
 /**
  * __Form header__.
@@ -32,12 +37,12 @@ var FormHeader = function FormHeader(_ref) {
   var children = _ref.children,
     description = _ref.description,
     title = _ref.title;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, null, title && /*#__PURE__*/_react.default.createElement(_heading.default, {
+  return (0, _react.jsx)(_primitives.Box, null, title && (0, _react.jsx)(_heading.default, {
     size: "large"
-  }, title), description && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: formHeaderDescriptionStyles.root
-  }, description), children && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: formHeaderContentStyles.root
+  }, title), description && (0, _react.jsx)(_primitives.Box, {
+    xcss: formHeaderDescriptionStyles
+  }, description), children && (0, _react.jsx)(_primitives.Box, {
+    xcss: formHeaderContentStyles
   }, children));
 };
 var _default = exports.default = FormHeader;

package/dist/cjs/form-section.js

@@ -1,4 +1,3 @@
-/* form-section.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,27 +5,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("./form-section.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _compiled = require("@atlaskit/primitives/compiled");
-var formSectionDescriptionStyles = {
-  root: "_1pfhu2gc"
-};
-var formSectionWrapperStyles = {
-  root: "_1pfh1ejb"
-};
+var _primitives = require("@atlaskit/primitives");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var formSectionDescriptionStyles = (0, _primitives.xcss)({
+  marginBlockStart: 'space.100'
+});
+var formSectionWrapperStyles = (0, _primitives.xcss)({
+  marginBlockStart: 'space.300'
+});
 var FormSectionWrapper = function FormSectionWrapper(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: formSectionWrapperStyles.root
+  return (0, _react.jsx)(_primitives.Box, {
+    xcss: formSectionWrapperStyles
   }, children);
 };
 var FormSectionDescription = function FormSectionDescription(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: formSectionDescriptionStyles.root
+  return (0, _react.jsx)(_primitives.Box, {
+    xcss: formSectionDescriptionStyles
   }, children);
 };
 
@@ -44,8 +48,8 @@ var FormSection = function FormSection(_ref3) {
   var children = _ref3.children,
     description = _ref3.description,
     title = _ref3.title;
-  return /*#__PURE__*/_react.default.createElement(FormSectionWrapper, null, title && /*#__PURE__*/_react.default.createElement(_heading.default, {
+  return (0, _react.jsx)(FormSectionWrapper, null, title && (0, _react.jsx)(_heading.default, {
     size: "medium"
-  }, title), description && /*#__PURE__*/_react.default.createElement(FormSectionDescription, null, description), children);
+  }, title), description && (0, _react.jsx)(FormSectionDescription, null, description), children);
 };
 var _default = exports.default = FormSection;

package/dist/cjs/label.js

@@ -1,19 +1,25 @@
-/* label.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Legend = exports.Label = void 0;
-require("./label.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var fieldsetLabelStyles = {
-  root: "_11c8qk37 _1e0c1o8l _syaz1gjq _k48pmoej _6rth1b66 _1pfhze3t"
-};
+var _react = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var fieldsetLabelStyles = (0, _react.css)({
+  display: 'inline-block',
+  color: "var(--ds-text-subtle, #44546F)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-bold, 700)",
+  marginBlockEnd: "var(--ds-space-050, 4px)",
+  marginBlockStart: "var(--ds-space-0, 0px)"
+});
 
 /**
  * __Label__
@@ -28,11 +34,11 @@ var Label = exports.Label = function Label(_ref) {
     htmlFor = _ref.htmlFor,
     id = _ref.id,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("label", {
+  return (0, _react.jsx)("label", {
+    css: fieldsetLabelStyles,
     id: id,
     htmlFor: htmlFor,
-    "data-testid": testId,
-    className: (0, _runtime.ax)([fieldsetLabelStyles.root])
+    "data-testid": testId
   }, children);
 };
 
@@ -43,8 +49,8 @@ var Label = exports.Label = function Label(_ref) {
  */
 var Legend = exports.Legend = function Legend(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("legend", {
-    className: (0, _runtime.ax)([fieldsetLabelStyles.root])
+  return (0, _react.jsx)("legend", {
+    css: fieldsetLabelStyles
   }, children);
 };
 var _default = exports.default = Label;

package/dist/cjs/messages.js

@@ -1,22 +1,24 @@
-/* messages.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ValidMessage = exports.MessageWrapperContext = exports.MessageWrapper = exports.HelperMessage = exports.ErrorMessage = void 0;
-require("./messages.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _error = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
 var _successEditorSuccess = _interopRequireDefault(require("@atlaskit/icon/utility/migration/success--editor-success"));
+var _colors = require("@atlaskit/theme/colors");
 var _fieldIdContext = require("./field-id-context");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 /**
  * API for the internal `<Message />` component. This is not public API.
  */
@@ -25,31 +27,43 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Public API of the various message components.
  */
 
-var messageStyles = {
-  root: "_zulp12x7 _11c8qk37 _1e0c1txw _1bah1q9y _1pfh1b66"
-};
+var messageStyles = (0, _react2.css)({
+  display: 'flex',
+  justifyContent: 'baseline',
+  gap: "var(--ds-space-075, 6px)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  marginBlockStart: "var(--ds-space-050, 4px)"
+});
 var messageAppearanceStyles = {
-  default: "_syaz1wmz",
-  error: "_syaze6sf",
-  valid: "_syazy73q"
-};
-var iconWrapperStyles = {
-  root: "_1e0c1txw _4t3i7vkz _4cvr1h6o"
+  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',
+  height: '16px',
+  alignItems: 'center'
+});
 var IconWrapper = function IconWrapper(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement("span", {
-    className: (0, _runtime.ax)([iconWrapperStyles.root])
+  return (0, _react2.jsx)("span", {
+    css: iconWrapperStyles
   }, children);
 };
 var messageIcons = {
-  error: /*#__PURE__*/React.createElement(_error.default, {
+  error: (0, _react2.jsx)(_error.default, {
     LEGACY_margin: "0 -2px 0 0",
     color: "currentColor",
     LEGACY_size: "small",
     label: "error"
   }),
-  valid: /*#__PURE__*/React.createElement(_successEditorSuccess.default, {
+  valid: (0, _react2.jsx)(_successEditorSuccess.default, {
     LEGACY_margin: "0 -2px 0 0",
     color: "currentColor",
     LEGACY_size: "small",
@@ -84,16 +98,16 @@ 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 : /*#__PURE__*/React.createElement("span", null, children);
-  return /*#__PURE__*/React.createElement("div", {
+  var content = typeof children === 'string' ? children : (0, _react2.jsx)("span", null, children);
+  return (0, _react2.jsx)("div", {
+    css: [messageStyles, messageAppearanceStyles[appearance]],
     "data-testid": testId,
     id: fieldId,
     ref: messageRef
     // For backwards compatability, if there is a wrapper, aria-live is not needed
     ,
-    "aria-live": !hasMessageWrapper ? 'polite' : undefined,
-    className: (0, _runtime.ax)([messageStyles.root, messageAppearanceStyles[appearance]])
-  }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
+    "aria-live": !hasMessageWrapper ? 'polite' : undefined
+  }, icon && (0, _react2.jsx)(IconWrapper, null, icon), content);
 };
 
 /**
@@ -106,8 +120,8 @@ var Message = function Message(_ref2) {
 var HelperMessage = exports.HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId;
-  return /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
-    return /*#__PURE__*/React.createElement(Message, {
+  return (0, _react2.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
+    return (0, _react2.jsx)(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
       testId: testId
     }, children);
@@ -124,8 +138,8 @@ var HelperMessage = exports.HelperMessage = function HelperMessage(_ref3) {
 var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref4) {
   var children = _ref4.children,
     testId = _ref4.testId;
-  return /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
-    return /*#__PURE__*/React.createElement(Message, {
+  return (0, _react2.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
+    return (0, _react2.jsx)(Message, {
       appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
@@ -143,8 +157,8 @@ var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref4) {
 var ValidMessage = exports.ValidMessage = function ValidMessage(_ref5) {
   var children = _ref5.children,
     testId = _ref5.testId;
-  return /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
-    return /*#__PURE__*/React.createElement(Message, {
+  return (0, _react2.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
+    return (0, _react2.jsx)(Message, {
       appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
       testId: testId
@@ -176,9 +190,9 @@ var MessageWrapper = exports.MessageWrapper = function MessageWrapper(_ref6) {
   var contextValue = {
     isWrapper: true
   };
-  return /*#__PURE__*/React.createElement(MessageWrapperContext.Provider, {
+  return (0, _react2.jsx)(MessageWrapperContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement("div", {
+  }, (0, _react2.jsx)("div", {
     "aria-live": "polite",
     "data-testid": "message-wrapper"
   }, children));

package/dist/cjs/range-field.js

@@ -24,26 +24,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
  */
-var RangeField = function RangeField(_ref) {
-  var children = _ref.children,
-    strippedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var RangeField = function RangeField(props) {
+  var children = props.children,
+    strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  // isInvalid and isRequired are specifically invalid for range inputs
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     _react.default.createElement(_field.default, (0, _extends2.default)({}, strippedProps, {
       transform: Number
-    }), function (_ref2) {
-      var _ref2$fieldProps = _ref2.fieldProps,
-        isInvalid = _ref2$fieldProps.isInvalid,
-        isRequired = _ref2$fieldProps.isRequired,
-        fieldProps = (0, _objectWithoutProperties2.default)(_ref2$fieldProps, _excluded2),
-        rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
-      return (
-        // isInvalid and isRequired are specifically invalid for range inputs
-        children(_objectSpread({
-          fieldProps: fieldProps
-        }, rest))
-      );
+    }), function (_ref) {
+      var _ref$fieldProps = _ref.fieldProps,
+        isInvalid = _ref$fieldProps.isInvalid,
+        isRequired = _ref$fieldProps.isRequired,
+        fieldProps = (0, _objectWithoutProperties2.default)(_ref$fieldProps, _excluded2),
+        rest = (0, _objectWithoutProperties2.default)(_ref, _excluded3);
+      return children(_objectSpread({
+        fieldProps: fieldProps
+      }, rest));
     })
   );
 };

package/dist/cjs/required-asterisk.js

@@ -1,23 +1,29 @@
-/* required-asterisk.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = RequiredAsterisk;
-require("./required-asterisk.compiled.css");
-var React = _interopRequireWildcard(require("react"));
-var _runtime = require("@compiled/react/runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var requiredIndicatorStyles = {
-  root: "_syaz1ick _ect41sbm _bozgv77o"
-};
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var requiredIndicatorStyles = (0, _react.css)({
+  color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
+  fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  paddingInlineStart: "var(--ds-space-025, 2px)"
+});
 function RequiredAsterisk() {
-  return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    title: "required",
-    className: (0, _runtime.ax)([requiredIndicatorStyles.root])
-  }, "*");
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+    (0, _react.jsx)("span", {
+      css: requiredIndicatorStyles,
+      "aria-hidden": "true",
+      title: "required"
+    }, "*")
+  );
 }

package/dist/es2019/field.js

@@ -1,15 +1,20 @@
-/* field.tsx generated by @compiled/babel-plugin v0.33.0 */
-import "./field.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import { FieldId } from './field-id-context';
 import { FormContext, IsDisabledContext } from './form';
 import { Label } from './label';
 import RequiredAsterisk from './required-asterisk';
-const fieldWrapperStyles = null;
+const fieldWrapperStyles = css({
+  marginBlockStart: "var(--ds-space-100, 8px)"
+});
 function isEvent(event) {
   return Boolean(event && event.target);
 }
@@ -228,14 +233,14 @@ export default function Field(props) {
     'aria-labelledby': `${fieldId}-label`,
     id: fieldId
   };
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": props.testId,
-    className: ax(["_1pfhu2gc"])
-  }, props.label && /*#__PURE__*/React.createElement(Label, {
+  return jsx("div", {
+    css: fieldWrapperStyles,
+    "data-testid": props.testId
+  }, props.label && jsx(Label, {
     htmlFor: fieldId,
     id: `${fieldId}-label`,
     testId: props.testId && `${props.testId}--label`
-  }, props.label, props.isRequired && /*#__PURE__*/React.createElement(RequiredAsterisk, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(FieldId.Provider, {
+  }, props.label, props.isRequired && jsx(RequiredAsterisk, null), props.elementAfterLabel), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,