@atlaskit/form 11.0.2 → 11.0.3

package/dist/esm/field.js

@@ -1,31 +1,34 @@
+/* field.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
+import "./field.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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
- */
 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';
-var fieldWrapperStyles = css({
-  marginBlockStart: "var(--ds-space-100, 8px)"
-});
+var fieldWrapperStyles = null;
 function isEvent(event) {
   return Boolean(event && event.target);
 }
 function isFunction(x) {
   return typeof x === 'function';
 }
+
+// Must be exported to satisfy error TS4023 from Jira builds
+// src/packages/servicedesk/virtual-agent/common/src/ui/base-text-field/index.tsx(10,14):
+// error TS4023: Exported variable `BaseTextField` has or is using name
+// `FieldComponentProps` from external module
+// `/opt/atlassian/pipelines/agent/build/jira/tsDist/@atlaskit__form/app/src/field`
+// but cannot be named.
+
 function usePreviousRef(current) {
   var ref = useRef(current);
 
@@ -240,14 +243,14 @@ export default function Field(props) {
     'aria-labelledby': "".concat(fieldId, "-label"),
     id: fieldId
   });
-  return jsx("div", {
-    css: fieldWrapperStyles,
-    "data-testid": props.testId
-  }, props.label && jsx(Label, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": props.testId,
+    className: ax(["_1pfhu2gc"])
+  }, props.label && /*#__PURE__*/React.createElement(Label, {
     htmlFor: fieldId,
     id: "".concat(fieldId, "-label"),
     testId: props.testId && "".concat(props.testId, "--label")
-  }, props.label, props.isRequired && jsx(RequiredAsterisk, null), props.elementAfterLabel), jsx(FieldId.Provider, {
+  }, props.label, props.isRequired && /*#__PURE__*/React.createElement(RequiredAsterisk, null), props.elementAfterLabel), /*#__PURE__*/React.createElement(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/esm/fieldset.compiled.css

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

package/dist/esm/fieldset.js

@@ -1,14 +1,9 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* fieldset.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./fieldset.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Legend } from './label';
-var fieldSetStyles = css({
-  marginBlockStart: "var(--ds-space-100, 8px)"
-});
+var fieldSetStyles = null;
 
 /**
  * __Fieldset__
@@ -23,8 +18,8 @@ var fieldSetStyles = css({
 var Fieldset = function Fieldset(_ref) {
   var children = _ref.children,
     legend = _ref.legend;
-  return jsx("fieldset", {
-    css: fieldSetStyles
-  }, legend && jsx(Legend, null, legend), children);
+  return /*#__PURE__*/React.createElement("fieldset", {
+    className: ax(["_1pfhu2gc"])
+  }, legend && /*#__PURE__*/React.createElement(Legend, null, legend), children);
 };
 export default Fieldset;

package/dist/esm/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/esm/form-footer.js

@@ -1,18 +1,9 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-var formFooterWrapperStyles = css({
-  display: 'flex',
-  justifyContent: 'flex-end',
-  marginBlockStart: "var(--ds-space-300, 24px)"
-});
-var justifyContentStyles = css({
-  justifyContent: 'flex-start'
-});
+/* form-footer.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./form-footer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var formFooterWrapperStyles = null;
+var justifyContentStyles = null;
 
 /**
  * __Form footer__
@@ -27,7 +18,7 @@ export default function FormFooter(_ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'end' : _ref$align,
     children = _ref.children;
-  return jsx("footer", {
-    css: [formFooterWrapperStyles, align === 'start' && justifyContentStyles]
+  return /*#__PURE__*/React.createElement("footer", {
+    className: ax(["_1e0c1txw _1bahesu3 _1pfh1ejb", align === 'start' && "_1bah1y6m"])
   }, children);
 }

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

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

package/dist/esm/form-header.js

@@ -1,19 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* form-header.tsx generated by @compiled/babel-plugin v0.36.0 */
+/* eslint-disable @atlaskit/design-system/use-primitives */
+import "./form-header.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import Heading from '@atlaskit/heading';
-import { Box, xcss } from '@atlaskit/primitives';
-var formHeaderContentStyles = xcss({
-  minWidth: '100%',
-  marginBlockStart: 'space.100'
-});
-var formHeaderDescriptionStyles = xcss({
-  marginBlockStart: 'space.100'
-});
+var formHeaderContentStyles = null;
+var formHeaderDescriptionStyles = null;
 
 /**
  * __Form header__.
@@ -29,12 +21,12 @@ var FormHeader = function FormHeader(_ref) {
   var children = _ref.children,
     description = _ref.description,
     title = _ref.title;
-  return jsx(Box, null, title && jsx(Heading, {
+  return /*#__PURE__*/React.createElement("div", null, title && /*#__PURE__*/React.createElement(Heading, {
     size: "large"
-  }, title), description && jsx(Box, {
-    xcss: formHeaderDescriptionStyles
-  }, description), children && jsx(Box, {
-    xcss: formHeaderContentStyles
+  }, title), description && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1pfhu2gc"])
+  }, description), children && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1ul91osq _1pfhu2gc"])
   }, children));
 };
 export default FormHeader;

package/dist/esm/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/esm/form-section.js

@@ -1,28 +1,22 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* form-section.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./form-section.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import Heading from '@atlaskit/heading';
-import { Box, xcss } from '@atlaskit/primitives';
-var formSectionDescriptionStyles = xcss({
-  marginBlockStart: 'space.100'
-});
-var formSectionWrapperStyles = xcss({
-  marginBlockStart: 'space.300'
-});
+var formSectionDescriptionStyles = null;
+var formSectionWrapperStyles = null;
 var FormSectionWrapper = function FormSectionWrapper(_ref) {
   var children = _ref.children;
-  return jsx(Box, {
-    xcss: formSectionWrapperStyles
+  // eslint-disable-next-line @atlaskit/design-system/use-primitives
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1pfh1ejb"])
   }, children);
 };
 var FormSectionDescription = function FormSectionDescription(_ref2) {
   var children = _ref2.children;
-  return jsx(Box, {
-    xcss: formSectionDescriptionStyles
+  // eslint-disable-next-line @atlaskit/design-system/use-primitives
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1pfhu2gc"])
   }, children);
 };
 
@@ -40,8 +34,8 @@ var FormSection = function FormSection(_ref3) {
   var children = _ref3.children,
     description = _ref3.description,
     title = _ref3.title;
-  return jsx(FormSectionWrapper, null, title && jsx(Heading, {
+  return /*#__PURE__*/React.createElement(FormSectionWrapper, null, title && /*#__PURE__*/React.createElement(Heading, {
     size: "medium"
-  }, title), description && jsx(FormSectionDescription, null, description), children);
+  }, title), description && /*#__PURE__*/React.createElement(FormSectionDescription, null, description), children);
 };
 export default FormSection;

package/dist/esm/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/esm/label.js

@@ -1,18 +1,8 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-var fieldsetLabelStyles = 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.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./label.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var fieldsetLabelStyles = null;
 
 /**
  * __Label__
@@ -27,11 +17,11 @@ export var Label = function Label(_ref) {
     htmlFor = _ref.htmlFor,
     id = _ref.id,
     testId = _ref.testId;
-  return jsx("label", {
-    css: fieldsetLabelStyles,
+  return /*#__PURE__*/React.createElement("label", {
     id: id,
     htmlFor: htmlFor,
-    "data-testid": testId
+    "data-testid": testId,
+    className: ax(["_11c8qk37 _1e0c1o8l _syaz1gjq _k48pmoej _6rth1b66 _1pfhze3t"])
   }, children);
 };
 
@@ -42,8 +32,7 @@ export var Label = function Label(_ref) {
  */
 export var Legend = function Legend(_ref2) {
   var children = _ref2.children;
-  return jsx("legend", {
-    css: fieldsetLabelStyles
+  return /*#__PURE__*/React.createElement("legend", {
+    className: ax(["_11c8qk37 _1e0c1o8l _syaz1gjq _k48pmoej _6rth1b66 _1pfhze3t"])
   }, children);
-};
-export default Label;
+};

package/dist/esm/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/esm/messages.js

@@ -1,16 +1,11 @@
+/* messages.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+import "./messages.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { createContext, useContext, useEffect, 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 ErrorIcon from '@atlaskit/icon/utility/migration/error';
 import SuccessIcon from '@atlaskit/icon/utility/migration/success--editor-success';
-import { N200 } from '@atlaskit/theme/colors';
 import { FieldId } from './field-id-context';
 
 /**
@@ -21,43 +16,29 @@ import { FieldId } from './field-id-context';
  * Public API of the various message components.
  */
 
-var messageStyles = 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 = null;
 var messageAppearanceStyles = {
-  default: css({
-    color: "var(--ds-text-subtlest, ".concat(N200, ")")
-  }),
-  error: css({
-    color: "var(--ds-text-danger, #AE2A19)"
-  }),
-  valid: css({
-    color: "var(--ds-text-success, #216E4E)"
-  })
+  default: "_syaz1wmz",
+  error: "_syaze6sf",
+  valid: "_syazy73q"
+};
+var iconWrapperStyles = {
+  root: "_1e0c1txw _4t3i7vkz _4cvr1h6o"
 };
-var iconWrapperStyles = css({
-  display: 'flex',
-  height: '16px',
-  alignItems: 'center'
-});
 var IconWrapper = function IconWrapper(_ref) {
   var children = _ref.children;
-  return jsx("span", {
-    css: iconWrapperStyles
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax([iconWrapperStyles.root])
   }, children);
 };
 var messageIcons = {
-  error: jsx(ErrorIcon, {
+  error: /*#__PURE__*/React.createElement(ErrorIcon, {
     LEGACY_margin: "0 -2px 0 0",
     color: "currentColor",
     LEGACY_size: "small",
     label: "error"
   }),
-  valid: jsx(SuccessIcon, {
+  valid: /*#__PURE__*/React.createElement(SuccessIcon, {
     LEGACY_margin: "0 -2px 0 0",
     color: "currentColor",
     LEGACY_size: "small",
@@ -92,16 +73,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 : jsx("span", null, children);
-  return 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 && jsx(IconWrapper, null, icon), content);
+    "aria-live": !hasMessageWrapper ? 'polite' : undefined,
+    className: ax(["_zulp12x7 _11c8qk37 _1e0c1txw _1bah1q9y _1pfh1b66", messageAppearanceStyles[appearance]])
+  }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
 };
 
 /**
@@ -114,8 +95,8 @@ var Message = function Message(_ref2) {
 export var HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId;
-  return jsx(FieldId.Consumer, null, function (fieldId) {
-    return jsx(Message, {
+  return /*#__PURE__*/React.createElement(FieldId.Consumer, null, function (fieldId) {
+    return /*#__PURE__*/React.createElement(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
       testId: testId
     }, children);
@@ -132,8 +113,8 @@ export var HelperMessage = function HelperMessage(_ref3) {
 export var ErrorMessage = function ErrorMessage(_ref4) {
   var children = _ref4.children,
     testId = _ref4.testId;
-  return jsx(FieldId.Consumer, null, function (fieldId) {
-    return jsx(Message, {
+  return /*#__PURE__*/React.createElement(FieldId.Consumer, null, function (fieldId) {
+    return /*#__PURE__*/React.createElement(Message, {
       appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
@@ -151,8 +132,8 @@ export var ErrorMessage = function ErrorMessage(_ref4) {
 export var ValidMessage = function ValidMessage(_ref5) {
   var children = _ref5.children,
     testId = _ref5.testId;
-  return jsx(FieldId.Consumer, null, function (fieldId) {
-    return jsx(Message, {
+  return /*#__PURE__*/React.createElement(FieldId.Consumer, null, function (fieldId) {
+    return /*#__PURE__*/React.createElement(Message, {
       appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
       testId: testId
@@ -166,7 +147,7 @@ export var ValidMessage = function ValidMessage(_ref5) {
  * A message wrapper context allows the children to check
  * if it is contained within the MessageWrapper.
  */
-export var MessageWrapperContext = /*#__PURE__*/createContext({
+var MessageWrapperContext = /*#__PURE__*/createContext({
   isWrapper: false
 });
 
@@ -184,9 +165,9 @@ export var MessageWrapper = function MessageWrapper(_ref6) {
   var contextValue = {
     isWrapper: true
   };
-  return jsx(MessageWrapperContext.Provider, {
+  return /*#__PURE__*/React.createElement(MessageWrapperContext.Provider, {
     value: contextValue
-  }, jsx("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
     "data-testid": "message-wrapper"
   }, children));

package/dist/esm/range-field.js

@@ -17,24 +17,26 @@ import Field from './field';
  * - [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 = _objectWithoutProperties(props, _excluded);
-  // isInvalid and isRequired are specifically invalid for range inputs
+var RangeField = function RangeField(_ref) {
+  var children = _ref.children,
+    strippedProps = _objectWithoutProperties(_ref, _excluded);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     React.createElement(Field, _extends({}, strippedProps, {
       transform: Number
-    }), function (_ref) {
-      var _ref$fieldProps = _ref.fieldProps,
-        isInvalid = _ref$fieldProps.isInvalid,
-        isRequired = _ref$fieldProps.isRequired,
-        fieldProps = _objectWithoutProperties(_ref$fieldProps, _excluded2),
-        rest = _objectWithoutProperties(_ref, _excluded3);
-      return children(_objectSpread({
-        fieldProps: fieldProps
-      }, rest));
+    }), function (_ref2) {
+      var _ref2$fieldProps = _ref2.fieldProps,
+        isInvalid = _ref2$fieldProps.isInvalid,
+        isRequired = _ref2$fieldProps.isRequired,
+        fieldProps = _objectWithoutProperties(_ref2$fieldProps, _excluded2),
+        rest = _objectWithoutProperties(_ref2, _excluded3);
+      return (
+        // isInvalid and isRequired are specifically invalid for range inputs
+        children(_objectSpread({
+          fieldProps: fieldProps
+        }, rest))
+      );
     })
   );
 };

package/dist/esm/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)}

package/dist/esm/required-asterisk.js

@@ -1,22 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { R400 } from '@atlaskit/theme/colors';
-var requiredIndicatorStyles = css({
-  color: "var(--ds-text-danger, ".concat(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)"
-});
+/* required-asterisk.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./required-asterisk.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var requiredIndicatorStyles = null;
 export default function RequiredAsterisk() {
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
-    jsx("span", {
-      css: requiredIndicatorStyles,
-      "aria-hidden": "true",
-      title: "required"
-    }, "*")
-  );
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    title: "required",
+    className: ax(["_syaz1ick _ect41sbm _bozgv77o"])
+  }, "*");
 }

package/dist/types/checkbox-field.d.ts

@@ -3,7 +3,7 @@ import { type FieldProps, type Meta } from './field';
 export interface CheckboxFieldProps extends FieldProps<string | undefined> {
     isChecked: boolean;
 }
-export interface CheckboxProps {
+interface CheckboxProps {
     /**
      * Content to render in the checkbox field. This is a function that is called with information about the field.
      */

package/dist/types/field.d.ts

@@ -3,7 +3,6 @@
  * @jsx jsx
  */
 import { type FormEvent, type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 type SupportedElements = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
 export interface FieldProps<FieldValue, Element extends SupportedElements = HTMLInputElement> {
     id: string;
@@ -81,5 +80,5 @@ export interface FieldComponentProps<FieldValue, Element extends SupportedElemen
      */
     testId?: string;
 }
-export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
+export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): JSX.Element;
 export {};

package/dist/types/fieldset.d.ts

@@ -3,8 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
-export interface FieldsetProps {
+interface FieldsetProps {
     /**
      * Content to render in the fieldset.
      */
@@ -24,5 +23,5 @@ export interface FieldsetProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
  */
-declare const Fieldset: ({ children, legend }: FieldsetProps) => jsx.JSX.Element;
+declare const Fieldset: ({ children, legend }: FieldsetProps) => JSX.Element;
 export default Fieldset;

package/dist/types/form-footer.d.ts

@@ -3,9 +3,8 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 import { type Align } from './types';
-export interface FormFooterProps {
+interface FormFooterProps {
     /**
      * Content to render in the footer of the form.
      */
@@ -24,4 +23,5 @@ export interface FormFooterProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-export default function FormFooter({ align, children }: FormFooterProps): jsx.JSX.Element;
+export default function FormFooter({ align, children }: FormFooterProps): JSX.Element;
+export {};

package/dist/types/form-header.d.ts

@@ -3,8 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
-export interface FormHeaderProps {
+interface FormHeaderProps {
     /**
      * Title of the form. This is a header.
      */
@@ -28,5 +27,5 @@ export interface FormHeaderProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
  */
-declare const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;
+declare const FormHeader: ({ children, description, title }: FormHeaderProps) => JSX.Element;
 export default FormHeader;

package/dist/types/form-section.d.ts

@@ -3,8 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
-import { jsx } from '@emotion/react';
-export interface FormSectionProps {
+interface FormSectionProps {
     /**
      * Title of the form section.
      */
@@ -28,5 +27,5 @@ export interface FormSectionProps {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout).
  */
-declare const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;
+declare const FormSection: ({ children, description, title }: FormSectionProps) => JSX.Element;
 export default FormSection;