@atlaskit/form 11.0.2 → 11.0.3

package/dist/cjs/required-asterisk.js

@@ -1,29 +1,21 @@
+/* required-asterisk.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = RequiredAsterisk;
-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)"
-});
+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 = null;
 function RequiredAsterisk() {
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
-    (0, _react.jsx)("span", {
-      css: requiredIndicatorStyles,
-      "aria-hidden": "true",
-      title: "required"
-    }, "*")
-  );
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    title: "required",
+    className: (0, _runtime.ax)(["_syaz1ick _ect41sbm _bozgv77o"])
+  }, "*");
 }

package/dist/es2019/field.compiled.css

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

package/dist/es2019/field.js

@@ -1,26 +1,29 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* field.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./field.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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 = css({
-  marginBlockStart: "var(--ds-space-100, 8px)"
-});
+const 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) {
   const ref = useRef(current);
 
@@ -233,14 +236,14 @@ export default function Field(props) {
     'aria-labelledby': `${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: `${fieldId}-label`,
     testId: props.testId && `${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/es2019/fieldset.compiled.css

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

package/dist/es2019/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';
-const fieldSetStyles = css({
-  marginBlockStart: "var(--ds-space-100, 8px)"
-});
+const fieldSetStyles = null;
 
 /**
  * __Fieldset__
@@ -24,8 +19,8 @@ const Fieldset = ({
   children,
   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/es2019/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/es2019/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';
-const formFooterWrapperStyles = css({
-  display: 'flex',
-  justifyContent: 'flex-end',
-  marginBlockStart: "var(--ds-space-300, 24px)"
-});
-const 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";
+const formFooterWrapperStyles = null;
+const justifyContentStyles = null;
 
 /**
  * __Form footer__
@@ -27,7 +18,7 @@ export default function FormFooter({
   align = 'end',
   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/es2019/form-header.compiled.css

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

package/dist/es2019/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';
-const formHeaderContentStyles = xcss({
-  minWidth: '100%',
-  marginBlockStart: 'space.100'
-});
-const formHeaderDescriptionStyles = xcss({
-  marginBlockStart: 'space.100'
-});
+const formHeaderContentStyles = null;
+const formHeaderDescriptionStyles = null;
 
 /**
  * __Form header__.
@@ -30,12 +22,12 @@ const FormHeader = ({
   description,
   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/es2019/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/es2019/form-section.js

@@ -1,30 +1,24 @@
-/**
- * @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';
-const formSectionDescriptionStyles = xcss({
-  marginBlockStart: 'space.100'
-});
-const formSectionWrapperStyles = xcss({
-  marginBlockStart: 'space.300'
-});
+const formSectionDescriptionStyles = null;
+const formSectionWrapperStyles = null;
 const FormSectionWrapper = ({
   children
 }) => {
-  return jsx(Box, {
-    xcss: formSectionWrapperStyles
+  // eslint-disable-next-line @atlaskit/design-system/use-primitives
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1pfh1ejb"])
   }, children);
 };
 const FormSectionDescription = ({
   children
 }) => {
-  return jsx(Box, {
-    xcss: formSectionDescriptionStyles
+  // eslint-disable-next-line @atlaskit/design-system/use-primitives
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1pfhu2gc"])
   }, children);
 };
 
@@ -43,8 +37,8 @@ const FormSection = ({
   description,
   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/es2019/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/es2019/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';
-const 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";
+const fieldsetLabelStyles = null;
 
 /**
  * __Label__
@@ -27,11 +17,11 @@ export const Label = ({
   htmlFor,
   id,
   testId
-}) => jsx("label", {
-  css: fieldsetLabelStyles,
+}) => /*#__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 const Label = ({
 export const Legend = ({
   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/es2019/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/es2019/messages.js

@@ -1,15 +1,10 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+/* messages.tsx generated by @compiled/babel-plugin v0.36.0 */
+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';
 
 /**
@@ -20,44 +15,28 @@ import { FieldId } from './field-id-context';
  * Public API of the various message components.
  */
 
-const 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)"
-});
+const messageStyles = null;
 const messageAppearanceStyles = {
-  default: css({
-    color: `var(--ds-text-subtlest, ${N200})`
-  }),
-  error: css({
-    color: "var(--ds-text-danger, #AE2A19)"
-  }),
-  valid: css({
-    color: "var(--ds-text-success, #216E4E)"
-  })
+  default: "_syaz1wmz",
+  error: "_syaze6sf",
+  valid: "_syazy73q"
+};
+const iconWrapperStyles = {
+  root: "_1e0c1txw _4t3i7vkz _4cvr1h6o"
 };
-const iconWrapperStyles = css({
-  display: 'flex',
-  height: '16px',
-  alignItems: 'center'
-});
 const IconWrapper = ({
   children
-}) => {
-  return jsx("span", {
-    css: iconWrapperStyles
-  }, children);
-};
+}) => /*#__PURE__*/React.createElement("span", {
+  className: ax([iconWrapperStyles.root])
+}, children);
 const 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",
@@ -90,16 +69,16 @@ const Message = ({
    * If the child is just a string, this is not required and we can use one
    * less DOM element.
    */
-  const content = typeof children === 'string' ? children : jsx("span", null, children);
-  return jsx("div", {
-    css: [messageStyles, messageAppearanceStyles[appearance]],
+  const 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);
 };
 
 /**
@@ -112,7 +91,7 @@ const Message = ({
 export const HelperMessage = ({
   children,
   testId
-}) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
+}) => /*#__PURE__*/React.createElement(FieldId.Consumer, null, fieldId => /*#__PURE__*/React.createElement(Message, {
   fieldId: fieldId ? `${fieldId}-helper` : undefined,
   testId: testId
 }, children));
@@ -127,7 +106,7 @@ export const HelperMessage = ({
 export const ErrorMessage = ({
   children,
   testId
-}) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
+}) => /*#__PURE__*/React.createElement(FieldId.Consumer, null, fieldId => /*#__PURE__*/React.createElement(Message, {
   appearance: "error",
   fieldId: fieldId ? `${fieldId}-error` : undefined,
   testId: testId
@@ -143,7 +122,7 @@ export const ErrorMessage = ({
 export const ValidMessage = ({
   children,
   testId
-}) => jsx(FieldId.Consumer, null, fieldId => jsx(Message, {
+}) => /*#__PURE__*/React.createElement(FieldId.Consumer, null, fieldId => /*#__PURE__*/React.createElement(Message, {
   appearance: "valid",
   fieldId: fieldId ? `${fieldId}-valid` : undefined,
   testId: testId
@@ -155,7 +134,7 @@ export const ValidMessage = ({
  * A message wrapper context allows the children to check
  * if it is contained within the MessageWrapper.
  */
-export const MessageWrapperContext = /*#__PURE__*/createContext({
+const MessageWrapperContext = /*#__PURE__*/createContext({
   isWrapper: false
 });
 
@@ -174,9 +153,9 @@ export const MessageWrapper = ({
   const 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/es2019/range-field.js

@@ -10,28 +10,25 @@ 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)
  */
-const RangeField = props => {
-  const {
-    children,
-    ...strippedProps
-  } = props;
-  // isInvalid and isRequired are specifically invalid for range inputs
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    React.createElement(Field, _extends({}, strippedProps, {
-      transform: Number
-    }), ({
-      fieldProps: {
-        isInvalid,
-        isRequired,
-        ...fieldProps
-      },
-      ...rest
-    }) => children({
-      fieldProps,
-      ...rest
-    }))
-  );
-};
+const RangeField = ({
+  children,
+  ...strippedProps
+}) =>
+/*#__PURE__*/
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+React.createElement(Field, _extends({}, strippedProps, {
+  transform: Number
+}), ({
+  fieldProps: {
+    isInvalid,
+    isRequired,
+    ...fieldProps
+  },
+  ...rest
+}) =>
+// isInvalid and isRequired are specifically invalid for range inputs
+children({
+  fieldProps,
+  ...rest
+}));
 export default RangeField;

package/dist/es2019/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/es2019/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';
-const requiredIndicatorStyles = css({
-  color: `var(--ds-text-danger, ${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";
+const 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/esm/field.compiled.css

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