@atlaskit/form 10.6.2 → 11.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/form
 
+## 11.0.0
+
+### Major Changes
+
+- [#166027](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166027)
+  [`7dc9e1f2a2cb7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7dc9e1f2a2cb7) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.Please note, in order to
+  use this version of `@atlaskit/form`, you will need to ensure that your bundler is configured to
+  handle `.css` imports correctly.Most bundlers come with built-in support for `.css` imports, so
+  you may not need to do anything. If you are using a different bundler, please refer to the
+  documentation for that bundler to understand how to handle `.css` imports.For more information on
+  the migration, please refer to [RFC-73 Migrating our components to
+  Compiled
+  CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/859
+
+## 10.6.3
+
+### Patch Changes
+
+- [#174905](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174905)
+  [`450cbe9dbf8ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/450cbe9dbf8ff) -
+  Upgrade from react-router-dom v4 to v6.
+
 ## 10.6.2
 
 ### Patch Changes

package/dist/cjs/field.compiled.css

@@ -0,0 +1 @@
+._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}

package/dist/cjs/field.js

@@ -1,29 +1,30 @@
+/* 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; } /**
- * @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 _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 isEvent(event) {
   return Boolean(event && event.target);
 }
@@ -244,14 +245,14 @@ function Field(props) {
     'aria-labelledby': "".concat(fieldId, "-label"),
     id: fieldId
   });
-  return (0, _react2.jsx)("div", {
-    css: fieldWrapperStyles,
-    "data-testid": props.testId
-  }, props.label && (0, _react2.jsx)(_label.Label, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": props.testId,
+    className: (0, _runtime.ax)(["_1pfhu2gc"])
+  }, props.label && /*#__PURE__*/React.createElement(_label.Label, {
     htmlFor: fieldId,
     id: "".concat(fieldId, "-label"),
     testId: props.testId && "".concat(props.testId, "--label")
-  }, props.label, props.isRequired && (0, _react2.jsx)(_requiredAsterisk.default, null), props.elementAfterLabel), (0, _react2.jsx)(_fieldIdContext.FieldId.Provider, {
+  }, props.label, props.isRequired && /*#__PURE__*/React.createElement(_requiredAsterisk.default, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/cjs/fieldset.compiled.css

@@ -0,0 +1 @@
+._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}

package/dist/cjs/fieldset.js

@@ -1,21 +1,18 @@
+/* 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;
-var _react = require("@emotion/react");
+require("./fieldset.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _label = require("./label");
-/**
- * @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)"
-});
+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;
 
 /**
  * __Fieldset__
@@ -30,8 +27,8 @@ var fieldSetStyles = (0, _react.css)({
 var Fieldset = function Fieldset(_ref) {
   var children = _ref.children,
     legend = _ref.legend;
-  return (0, _react.jsx)("fieldset", {
-    css: fieldSetStyles
-  }, legend && (0, _react.jsx)(_label.Legend, null, legend), children);
+  return /*#__PURE__*/React.createElement("fieldset", {
+    className: (0, _runtime.ax)(["_1pfhu2gc"])
+  }, legend && /*#__PURE__*/React.createElement(_label.Legend, null, legend), children);
 };
 var _default = exports.default = Fieldset;

package/dist/cjs/form-footer.compiled.css

@@ -0,0 +1,4 @@
+._1bah1y6m{justify-content:flex-start}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1pfh1ejb{margin-block-start:var(--ds-space-300,24px)}

package/dist/cjs/form-footer.js

@@ -1,25 +1,22 @@
+/* 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;
-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'
-});
+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"
+};
 
 /**
  * __Form footer__
@@ -34,7 +31,7 @@ function FormFooter(_ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'end' : _ref$align,
     children = _ref.children;
-  return (0, _react.jsx)("footer", {
-    css: [formFooterWrapperStyles, align === 'start' && justifyContentStyles]
+  return /*#__PURE__*/React.createElement("footer", {
+    className: (0, _runtime.ax)([formFooterWrapperStyles.root, align === 'start' && justifyContentStyles.root])
   }, children);
 }

package/dist/cjs/form-header.compiled.css

@@ -0,0 +1,2 @@
+._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}
+._1ul91osq{min-width:100%}

package/dist/cjs/form-header.js

@@ -1,3 +1,4 @@
+/* form-header.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,23 +6,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./form-header.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-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'
-});
+var _compiled = require("@atlaskit/primitives/compiled");
+var formHeaderContentStyles = {
+  root: "_1ul91osq _1pfhu2gc"
+};
+var formHeaderDescriptionStyles = {
+  root: "_1pfhu2gc"
+};
 
 /**
  * __Form header__.
@@ -37,12 +32,12 @@ var FormHeader = function FormHeader(_ref) {
   var children = _ref.children,
     description = _ref.description,
     title = _ref.title;
-  return (0, _react.jsx)(_primitives.Box, null, title && (0, _react.jsx)(_heading.default, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, null, title && /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "large"
-  }, title), description && (0, _react.jsx)(_primitives.Box, {
-    xcss: formHeaderDescriptionStyles
-  }, description), children && (0, _react.jsx)(_primitives.Box, {
-    xcss: formHeaderContentStyles
+  }, title), description && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: formHeaderDescriptionStyles.root
+  }, description), children && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: formHeaderContentStyles.root
   }, children));
 };
 var _default = exports.default = FormHeader;

package/dist/cjs/form-section.compiled.css

@@ -0,0 +1,2 @@
+._1pfh1ejb{margin-block-start:var(--ds-space-300,24px)}
+._1pfhu2gc{margin-block-start:var(--ds-space-100,8px)}

package/dist/cjs/form-section.js

@@ -1,3 +1,4 @@
+/* form-section.tsx generated by @compiled/babel-plugin v0.33.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,32 +6,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./form-section.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-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 _compiled = require("@atlaskit/primitives/compiled");
+var formSectionDescriptionStyles = {
+  root: "_1pfhu2gc"
+};
+var formSectionWrapperStyles = {
+  root: "_1pfh1ejb"
+};
 var FormSectionWrapper = function FormSectionWrapper(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)(_primitives.Box, {
-    xcss: formSectionWrapperStyles
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: formSectionWrapperStyles.root
   }, children);
 };
 var FormSectionDescription = function FormSectionDescription(_ref2) {
   var children = _ref2.children;
-  return (0, _react.jsx)(_primitives.Box, {
-    xcss: formSectionDescriptionStyles
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: formSectionDescriptionStyles.root
   }, children);
 };
 
@@ -48,8 +44,8 @@ var FormSection = function FormSection(_ref3) {
   var children = _ref3.children,
     description = _ref3.description,
     title = _ref3.title;
-  return (0, _react.jsx)(FormSectionWrapper, null, title && (0, _react.jsx)(_heading.default, {
+  return /*#__PURE__*/_react.default.createElement(FormSectionWrapper, null, title && /*#__PURE__*/_react.default.createElement(_heading.default, {
     size: "medium"
-  }, title), description && (0, _react.jsx)(FormSectionDescription, null, description), children);
+  }, title), description && /*#__PURE__*/_react.default.createElement(FormSectionDescription, null, description), children);
 };
 var _default = exports.default = FormSection;

package/dist/cjs/label.compiled.css

@@ -0,0 +1,6 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1e0c1o8l{display:inline-block}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
+._6rth1b66{margin-block-end:var(--ds-space-050,4px)}
+._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}

package/dist/cjs/label.js

@@ -1,25 +1,19 @@
+/* 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;
-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)"
-});
+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"
+};
 
 /**
  * __Label__
@@ -34,11 +28,11 @@ var Label = exports.Label = function Label(_ref) {
     htmlFor = _ref.htmlFor,
     id = _ref.id,
     testId = _ref.testId;
-  return (0, _react.jsx)("label", {
-    css: fieldsetLabelStyles,
+  return /*#__PURE__*/React.createElement("label", {
     id: id,
     htmlFor: htmlFor,
-    "data-testid": testId
+    "data-testid": testId,
+    className: (0, _runtime.ax)([fieldsetLabelStyles.root])
   }, children);
 };
 
@@ -49,8 +43,8 @@ var Label = exports.Label = function Label(_ref) {
  */
 var Legend = exports.Legend = function Legend(_ref2) {
   var children = _ref2.children;
-  return (0, _react.jsx)("legend", {
-    css: fieldsetLabelStyles
+  return /*#__PURE__*/React.createElement("legend", {
+    className: (0, _runtime.ax)([fieldsetLabelStyles.root])
   }, children);
 };
 var _default = exports.default = Label;

package/dist/cjs/messages.compiled.css

@@ -0,0 +1,10 @@
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulp12x7{gap:var(--ds-space-075,6px)}
+._1bah1q9y{justify-content:baseline}
+._1e0c1txw{display:flex}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._4t3i7vkz{height:1pc}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._syaze6sf{color:var(--ds-text-danger,#ae2a19)}
+._syazy73q{color:var(--ds-text-success,#216e4e)}

package/dist/cjs/messages.js

@@ -1,24 +1,22 @@
+/* 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");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+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; }
 /**
  * API for the internal `<Message />` component. This is not public API.
  */
@@ -27,43 +25,31 @@ var _fieldIdContext = require("./field-id-context");
  * Public API of the various message components.
  */
 
-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 messageStyles = {
+  root: "_zulp12x7 _11c8qk37 _1e0c1txw _1bah1q9y _1pfh1b66"
+};
 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)"
-  })
+  default: "_syaz1wmz",
+  error: "_syaze6sf",
+  valid: "_syazy73q"
+};
+var iconWrapperStyles = {
+  root: "_1e0c1txw _4t3i7vkz _4cvr1h6o"
 };
-var iconWrapperStyles = (0, _react2.css)({
-  display: 'flex',
-  height: '16px',
-  alignItems: 'center'
-});
 var IconWrapper = function IconWrapper(_ref) {
   var children = _ref.children;
-  return (0, _react2.jsx)("span", {
-    css: iconWrapperStyles
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)([iconWrapperStyles.root])
   }, children);
 };
 var messageIcons = {
-  error: (0, _react2.jsx)(_error.default, {
+  error: /*#__PURE__*/React.createElement(_error.default, {
     LEGACY_margin: "0 -2px 0 0",
     color: "currentColor",
     LEGACY_size: "small",
     label: "error"
   }),
-  valid: (0, _react2.jsx)(_successEditorSuccess.default, {
+  valid: /*#__PURE__*/React.createElement(_successEditorSuccess.default, {
     LEGACY_margin: "0 -2px 0 0",
     color: "currentColor",
     LEGACY_size: "small",
@@ -98,16 +84,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 : (0, _react2.jsx)("span", null, children);
-  return (0, _react2.jsx)("div", {
-    css: [messageStyles, messageAppearanceStyles[appearance]],
+  var content = typeof children === 'string' ? children : /*#__PURE__*/React.createElement("span", null, children);
+  return /*#__PURE__*/React.createElement("div", {
     "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
-  }, icon && (0, _react2.jsx)(IconWrapper, null, icon), content);
+    "aria-live": !hasMessageWrapper ? 'polite' : undefined,
+    className: (0, _runtime.ax)([messageStyles.root, messageAppearanceStyles[appearance]])
+  }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
 };
 
 /**
@@ -120,8 +106,8 @@ var Message = function Message(_ref2) {
 var HelperMessage = exports.HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId;
-  return (0, _react2.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
-    return (0, _react2.jsx)(Message, {
+  return /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
+    return /*#__PURE__*/React.createElement(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
       testId: testId
     }, children);
@@ -138,8 +124,8 @@ var HelperMessage = exports.HelperMessage = function HelperMessage(_ref3) {
 var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref4) {
   var children = _ref4.children,
     testId = _ref4.testId;
-  return (0, _react2.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
-    return (0, _react2.jsx)(Message, {
+  return /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
+    return /*#__PURE__*/React.createElement(Message, {
       appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
@@ -157,8 +143,8 @@ var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref4) {
 var ValidMessage = exports.ValidMessage = function ValidMessage(_ref5) {
   var children = _ref5.children,
     testId = _ref5.testId;
-  return (0, _react2.jsx)(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
-    return (0, _react2.jsx)(Message, {
+  return /*#__PURE__*/React.createElement(_fieldIdContext.FieldId.Consumer, null, function (fieldId) {
+    return /*#__PURE__*/React.createElement(Message, {
       appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
       testId: testId
@@ -190,9 +176,9 @@ var MessageWrapper = exports.MessageWrapper = function MessageWrapper(_ref6) {
   var contextValue = {
     isWrapper: true
   };
-  return (0, _react2.jsx)(MessageWrapperContext.Provider, {
+  return /*#__PURE__*/React.createElement(MessageWrapperContext.Provider, {
     value: contextValue
-  }, (0, _react2.jsx)("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     "data-testid": "message-wrapper"
   }, children));

package/dist/cjs/range-field.js

@@ -24,24 +24,26 @@ 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(props) {
-  var children = props.children,
-    strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  // isInvalid and isRequired are specifically invalid for range inputs
+var RangeField = function RangeField(_ref) {
+  var children = _ref.children,
+    strippedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   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 (_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));
+    }), 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))
+      );
     })
   );
 };

package/dist/cjs/required-asterisk.compiled.css

@@ -0,0 +1,3 @@
+._bozgv77o{padding-inline-start:var(--ds-space-025,2px)}
+._ect41sbm{font-family:var(--ds-font-family-body,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._syaz1ick{color:var(--ds-text-danger,#de350b)}