@atlaskit/form 11.0.0 → 11.0.1

package/dist/esm/form-section.js

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

package/dist/esm/label.js

@@ -1,10 +1,18 @@
-/* label.tsx generated by @compiled/babel-plugin v0.33.0 */
-import "./label.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-var fieldsetLabelStyles = {
-  root: "_11c8qk37 _1e0c1o8l _syaz1gjq _k48pmoej _6rth1b66 _1pfhze3t"
-};
+/**
+ * @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__
@@ -19,11 +27,11 @@ export var Label = function Label(_ref) {
     htmlFor = _ref.htmlFor,
     id = _ref.id,
     testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("label", {
+  return jsx("label", {
+    css: fieldsetLabelStyles,
     id: id,
     htmlFor: htmlFor,
-    "data-testid": testId,
-    className: ax([fieldsetLabelStyles.root])
+    "data-testid": testId
   }, children);
 };
 
@@ -34,8 +42,8 @@ export var Label = function Label(_ref) {
  */
 export var Legend = function Legend(_ref2) {
   var children = _ref2.children;
-  return /*#__PURE__*/React.createElement("legend", {
-    className: ax([fieldsetLabelStyles.root])
+  return jsx("legend", {
+    css: fieldsetLabelStyles
   }, children);
 };
 export default Label;

package/dist/esm/messages.js

@@ -1,11 +1,16 @@
-/* messages.tsx generated by @compiled/babel-plugin v0.33.0 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "./messages.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
 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';
 
 /**
@@ -16,31 +21,43 @@ import { FieldId } from './field-id-context';
  * Public API of the various message components.
  */
 
-var messageStyles = {
-  root: "_zulp12x7 _11c8qk37 _1e0c1txw _1bah1q9y _1pfh1b66"
-};
+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 messageAppearanceStyles = {
-  default: "_syaz1wmz",
-  error: "_syaze6sf",
-  valid: "_syazy73q"
-};
-var iconWrapperStyles = {
-  root: "_1e0c1txw _4t3i7vkz _4cvr1h6o"
+  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)"
+  })
 };
+var iconWrapperStyles = css({
+  display: 'flex',
+  height: '16px',
+  alignItems: 'center'
+});
 var IconWrapper = function IconWrapper(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement("span", {
-    className: ax([iconWrapperStyles.root])
+  return jsx("span", {
+    css: iconWrapperStyles
   }, children);
 };
 var messageIcons = {
-  error: /*#__PURE__*/React.createElement(ErrorIcon, {
+  error: jsx(ErrorIcon, {
     LEGACY_margin: "0 -2px 0 0",
     color: "currentColor",
     LEGACY_size: "small",
     label: "error"
   }),
-  valid: /*#__PURE__*/React.createElement(SuccessIcon, {
+  valid: jsx(SuccessIcon, {
     LEGACY_margin: "0 -2px 0 0",
     color: "currentColor",
     LEGACY_size: "small",
@@ -75,16 +92,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 : jsx("span", null, children);
+  return 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: ax([messageStyles.root, messageAppearanceStyles[appearance]])
-  }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
+    "aria-live": !hasMessageWrapper ? 'polite' : undefined
+  }, icon && jsx(IconWrapper, null, icon), content);
 };
 
 /**
@@ -97,8 +114,8 @@ var Message = function Message(_ref2) {
 export var HelperMessage = function HelperMessage(_ref3) {
   var children = _ref3.children,
     testId = _ref3.testId;
-  return /*#__PURE__*/React.createElement(FieldId.Consumer, null, function (fieldId) {
-    return /*#__PURE__*/React.createElement(Message, {
+  return jsx(FieldId.Consumer, null, function (fieldId) {
+    return jsx(Message, {
       fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
       testId: testId
     }, children);
@@ -115,8 +132,8 @@ export var HelperMessage = function HelperMessage(_ref3) {
 export var ErrorMessage = function ErrorMessage(_ref4) {
   var children = _ref4.children,
     testId = _ref4.testId;
-  return /*#__PURE__*/React.createElement(FieldId.Consumer, null, function (fieldId) {
-    return /*#__PURE__*/React.createElement(Message, {
+  return jsx(FieldId.Consumer, null, function (fieldId) {
+    return jsx(Message, {
       appearance: "error",
       fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
       testId: testId
@@ -134,8 +151,8 @@ export var ErrorMessage = function ErrorMessage(_ref4) {
 export var ValidMessage = function ValidMessage(_ref5) {
   var children = _ref5.children,
     testId = _ref5.testId;
-  return /*#__PURE__*/React.createElement(FieldId.Consumer, null, function (fieldId) {
-    return /*#__PURE__*/React.createElement(Message, {
+  return jsx(FieldId.Consumer, null, function (fieldId) {
+    return jsx(Message, {
       appearance: "valid",
       fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
       testId: testId
@@ -167,9 +184,9 @@ export var MessageWrapper = function MessageWrapper(_ref6) {
   var contextValue = {
     isWrapper: true
   };
-  return /*#__PURE__*/React.createElement(MessageWrapperContext.Provider, {
+  return jsx(MessageWrapperContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     "aria-live": "polite",
     "data-testid": "message-wrapper"
   }, children));

package/dist/esm/range-field.js

@@ -17,26 +17,24 @@ 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(_ref) {
-  var children = _ref.children,
-    strippedProps = _objectWithoutProperties(_ref, _excluded);
+var RangeField = function RangeField(props) {
+  var children = props.children,
+    strippedProps = _objectWithoutProperties(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.createElement(Field, _extends({}, strippedProps, {
       transform: Number
-    }), 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))
-      );
+    }), 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));
     })
   );
 };

package/dist/esm/required-asterisk.js

@@ -1,14 +1,22 @@
-/* required-asterisk.tsx generated by @compiled/babel-plugin v0.33.0 */
-import "./required-asterisk.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
-var requiredIndicatorStyles = {
-  root: "_syaz1ick _ect41sbm _bozgv77o"
-};
+/**
+ * @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)"
+});
 export default function RequiredAsterisk() {
-  return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    title: "required",
-    className: ax([requiredIndicatorStyles.root])
-  }, "*");
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives-text
+    jsx("span", {
+      css: requiredIndicatorStyles,
+      "aria-hidden": "true",
+      title: "required"
+    }, "*")
+  );
 }

package/dist/types/field.d.ts

@@ -3,6 +3,7 @@
  * @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;
@@ -80,5 +81,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.Element;
+export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
 export {};

package/dist/types/fieldset.d.ts

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FieldsetProps {
     /**
      * Content to render in the fieldset.
@@ -23,5 +24,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.Element;
+declare const Fieldset: ({ children, legend }: FieldsetProps) => jsx.JSX.Element;
 export default Fieldset;

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

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 import { type Align } from './types';
 export interface FormFooterProps {
     /**
@@ -23,4 +24,4 @@ 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.Element;
+export default function FormFooter({ align, children }: FormFooterProps): jsx.JSX.Element;

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

@@ -1,4 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FormHeaderProps {
     /**
      * Title of the form. This is a header.
@@ -23,5 +28,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.Element;
+declare const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;
 export default FormHeader;

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

@@ -1,4 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FormSectionProps {
     /**
      * Title of the form section.
@@ -23,5 +28,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.Element;
+declare const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;
 export default FormSection;

package/dist/types/messages.d.ts

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 type MessageAppearance = 'default' | 'error' | 'valid';
 /**
  * API for the internal `<Message />` component. This is not public API.
@@ -35,7 +36,7 @@ type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
  * 'Password should be more than 4 characters'
  *
  */
-export declare const HelperMessage: ({ children, testId }: MessageProps) => JSX.Element;
+export declare const HelperMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Error message__
  *
@@ -43,7 +44,7 @@ export declare const HelperMessage: ({ children, testId }: MessageProps) => JSX.
  * 'Invalid username, needs to be more than 4 characters'.
  *
  */
-export declare const ErrorMessage: ({ children, testId }: MessageProps) => JSX.Element;
+export declare const ErrorMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Valid message__
  *
@@ -51,7 +52,7 @@ export declare const ErrorMessage: ({ children, testId }: MessageProps) => JSX.E
  * a helper message could be 'Nice one, this username is available'.
  *
  */
-export declare const ValidMessage: ({ children, testId }: MessageProps) => JSX.Element;
+export declare const ValidMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Message wrapper context__
  *
@@ -70,5 +71,5 @@ export declare const MessageWrapperContext: import("react").Context<{
  * may not render the message.
  *
  */
-export declare const MessageWrapper: ({ children }: MessageProps) => JSX.Element;
+export declare const MessageWrapper: ({ children }: MessageProps) => jsx.JSX.Element;
 export {};

package/dist/types/required-asterisk.d.ts

@@ -2,5 +2,5 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/// <reference types="react" />
-export default function RequiredAsterisk(): JSX.Element;
+import { jsx } from '@emotion/react';
+export default function RequiredAsterisk(): jsx.JSX.Element;

package/dist/types-ts4.5/field.d.ts

@@ -3,6 +3,7 @@
  * @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;
@@ -80,5 +81,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.Element;
+export default function Field<FieldValue = string, Element extends SupportedElements = HTMLInputElement>(props: FieldComponentProps<FieldValue, Element>): jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/fieldset.d.ts

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FieldsetProps {
     /**
      * Content to render in the fieldset.
@@ -23,5 +24,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.Element;
+declare const Fieldset: ({ children, legend }: FieldsetProps) => jsx.JSX.Element;
 export default Fieldset;

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

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 import { type Align } from './types';
 export interface FormFooterProps {
     /**
@@ -23,4 +24,4 @@ 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.Element;
+export default function FormFooter({ align, children }: FormFooterProps): jsx.JSX.Element;

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

@@ -1,4 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FormHeaderProps {
     /**
      * Title of the form. This is a header.
@@ -23,5 +28,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.Element;
+declare const FormHeader: ({ children, description, title }: FormHeaderProps) => jsx.JSX.Element;
 export default FormHeader;

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

@@ -1,4 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 export interface FormSectionProps {
     /**
      * Title of the form section.
@@ -23,5 +28,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.Element;
+declare const FormSection: ({ children, description, title }: FormSectionProps) => jsx.JSX.Element;
 export default FormSection;

package/dist/types-ts4.5/messages.d.ts

@@ -3,6 +3,7 @@
  * @jsx jsx
  */
 import { type ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 type MessageAppearance = 'default' | 'error' | 'valid';
 /**
  * API for the internal `<Message />` component. This is not public API.
@@ -35,7 +36,7 @@ type MessageProps = Pick<InternalMessageProps, 'children' | 'testId'>;
  * 'Password should be more than 4 characters'
  *
  */
-export declare const HelperMessage: ({ children, testId }: MessageProps) => JSX.Element;
+export declare const HelperMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Error message__
  *
@@ -43,7 +44,7 @@ export declare const HelperMessage: ({ children, testId }: MessageProps) => JSX.
  * 'Invalid username, needs to be more than 4 characters'.
  *
  */
-export declare const ErrorMessage: ({ children, testId }: MessageProps) => JSX.Element;
+export declare const ErrorMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Valid message__
  *
@@ -51,7 +52,7 @@ export declare const ErrorMessage: ({ children, testId }: MessageProps) => JSX.E
  * a helper message could be 'Nice one, this username is available'.
  *
  */
-export declare const ValidMessage: ({ children, testId }: MessageProps) => JSX.Element;
+export declare const ValidMessage: ({ children, testId }: MessageProps) => jsx.JSX.Element;
 /**
  * __Message wrapper context__
  *
@@ -70,5 +71,5 @@ export declare const MessageWrapperContext: import("react").Context<{
  * may not render the message.
  *
  */
-export declare const MessageWrapper: ({ children }: MessageProps) => JSX.Element;
+export declare const MessageWrapper: ({ children }: MessageProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/required-asterisk.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-export default function RequiredAsterisk(): JSX.Element;
+import { jsx } from '@emotion/react';
+export default function RequiredAsterisk(): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "11.0.0",
+	"version": "11.0.1",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,15 +26,14 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/css": "^0.7.0",
 		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/heading": "^4.0.0",
-		"@atlaskit/icon": "^23.1.0",
+		"@atlaskit/icon": "^23.3.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.5.0",
+		"@atlaskit/tokens": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.1",
+		"@emotion/react": "^11.7.1",
 		"final-form": "^4.20.3",
 		"final-form-focus": "^1.1.2",
 		"lodash": "^4.17.21",
@@ -50,7 +49,7 @@
 		"@atlaskit/banner": "^12.6.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/checkbox": "^15.2.0",
-		"@atlaskit/modal-dialog": "^12.18.0",
+		"@atlaskit/modal-dialog": "^12.19.0",
 		"@atlaskit/radio": "^7.0.0",
 		"@atlaskit/range": "^8.0.0",
 		"@atlaskit/select": "^18.9.0",

package/dist/cjs/field.compiled.css

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

package/dist/cjs/fieldset.compiled.css

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

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

@@ -1,4 +0,0 @@
-._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-header.compiled.css

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

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

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