@atlaskit/form 8.3.1 → 8.4.3

package/dist/esm/{Field.js → field.js}

@@ -6,11 +6,59 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+/** @jsx jsx */
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/core';
 import { uid } from 'react-uid';
 import invariant from 'tiny-invariant';
-import { FormContext, IsDisabledContext } from './Form';
-import FieldWrapper, { Label, RequiredIndicator } from './styled/Field';
+import { R400 } from '@atlaskit/theme/colors';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h200 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
+import { FormContext, IsDisabledContext } from './form';
+var gridSize = getGridSize();
+var fontFamily = getFontFamily();
+var fieldWrapperStyles = css({
+  marginTop: "".concat(gridSize, "px")
+});
+var labelStyles = css({
+  display: 'inline-block',
+  marginTop: 0,
+  marginBottom: "".concat(gridSize * 0.5, "px"),
+  fontFamily: "".concat(fontFamily)
+});
+var requiredIndicatorStyles = css({
+  paddingLeft: "".concat(gridSize * 0.25, "px"),
+  color: "".concat(token('color.text.danger', R400)),
+  fontFamily: "".concat(fontFamily)
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH200Styles = css(h200({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = css(h200({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+var Label = function Label(_ref) {
+  var children = _ref.children,
+      fieldId = _ref.fieldId;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  return jsx("label", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
+    id: "".concat(fieldId, "-label"),
+    htmlFor: fieldId
+  }, children);
+};
 
 function isEvent(event) {
   return Boolean(event && event.target);
@@ -20,8 +68,11 @@ function isFunction(x) {
   return typeof x === 'function';
 }
 
-// Provides the id of the field to message components.
-// This links the message with the field for screen-readers.
+/**
+ * __Field id__
+ *
+ * A field id uses the context API. It provides the id of the field to message components. This links the message with the field of screenreaders.
+ */
 export var FieldId = /*#__PURE__*/React.createContext(undefined);
 
 function usePreviousRef(current) {
@@ -124,12 +175,18 @@ export default function Field(props) {
 
     var unregister = registerField(latestPropsRef.current.name, // @ts-ignore
     latestPropsRef.current.defaultValue, function (fieldState) {
-      /** Do not update dirtySinceLastSubmit until submission has finished. */
+      /**
+       * Do not update dirtySinceLastSubmit until submission has finished.
+       */
       var modifiedDirtySinceLastSubmit = fieldState.submitting ? latestStateRef.current.meta.dirtySinceLastSubmit : fieldState.dirtySinceLastSubmit;
-      /** Do not update submitFailed until submission has finished. */
+      /**
+       * Do not update submitFailed until submission has finished.
+       */
 
       var modifiedSubmitFailed = fieldState.submitting ? latestStateRef.current.meta.submitFailed : fieldState.submitFailed;
-      /** Do not use submitError if the value has changed. */
+      /**
+       * Do not use submitError if the value has changed.
+       */
 
       var modifiedSubmitError = modifiedDirtySinceLastSubmit && latestPropsRef.current.validate ? undefined : fieldState.submitError;
       var modifiedError = modifiedSubmitError || (fieldState.touched || fieldState.dirty) && fieldState.error;
@@ -206,7 +263,8 @@ export default function Field(props) {
     });
     return unregister;
   }, [latestPropsRef, latestStateRef, registerField, props.name, hasDefaultValueChanged]);
-  var fieldId = useMemo(function () {
+  var fieldId = useMemo( // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
+  function () {
     return props.id ? props.id : "".concat(props.name, "-").concat(uid({
       id: props.name
     }));
@@ -222,12 +280,14 @@ export default function Field(props) {
     id: fieldId
   });
 
-  return /*#__PURE__*/React.createElement(FieldWrapper, null, props.label && /*#__PURE__*/React.createElement(Label, {
-    id: "".concat(fieldId, "-label"),
-    htmlFor: fieldId
-  }, props.label, props.isRequired && /*#__PURE__*/React.createElement(RequiredIndicator, {
+  return jsx("div", {
+    css: fieldWrapperStyles
+  }, props.label && jsx(Label, {
+    fieldId: fieldId
+  }, props.label, props.isRequired && jsx("span", {
+    css: requiredIndicatorStyles,
     "aria-hidden": "true"
-  }, "*")), /*#__PURE__*/React.createElement(FieldId.Provider, {
+  }, "*")), jsx(FieldId.Provider, {
     value: fieldId
   }, props.children({
     fieldProps: extendedFieldProps,

package/dist/esm/fieldset.js

@@ -0,0 +1,60 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h200 } from '@atlaskit/theme/typography';
+var fontFamily = getFontFamily();
+var gridSize = getGridSize();
+var fieldsetLabelStyles = css({
+  display: 'inline-block',
+  marginTop: 0,
+  marginBottom: 0,
+  fontFamily: "".concat(fontFamily)
+});
+var fieldSetStyles = css({
+  marginTop: "".concat(gridSize, "px")
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH200Styles = css(h200({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = css(h200({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+var FieldsetLabel = function FieldsetLabel(_ref) {
+  var children = _ref.children;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  return jsx("label", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, fieldsetLabelStyles]
+  }, children);
+};
+/**
+ * __Fieldset__
+ *
+ * A fieldset groups a number of fields together. For example, when multiple CheckboxFields share the same name,
+ * a fieldset can be used to group them together. This makes the form more accessible.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields)
+ */
+
+
+var Fieldset = function Fieldset(_ref2) {
+  var children = _ref2.children,
+      legend = _ref2.legend;
+  return jsx("fieldset", {
+    css: fieldSetStyles
+  }, legend && jsx("legend", null, jsx(FieldsetLabel, null, legend)), children);
+};
+
+export default Fieldset;

package/dist/esm/form-footer.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+var gridSize = getGridSize();
+var formFooterWrapperStyles = css({
+  display: 'flex',
+  marginTop: "".concat(gridSize * 3, "px"),
+  justifyContent: 'flex-end'
+});
+var justifyContentStyles = css({
+  justifyContent: 'flex-start'
+});
+/**
+ * __Form footer__
+ *
+ * A form footer has the content to be shown at the bottom of the form. This is usually the submit button.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [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(_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]
+  }, children);
+}

package/dist/esm/form-header.js

@@ -0,0 +1,90 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h700 } from '@atlaskit/theme/typography';
+var gridSize = getGridSize();
+var fontFamily = getFontFamily();
+var formHeaderContentStyles = css({
+  minWidth: '100%',
+  marginTop: "".concat(gridSize, "px")
+});
+var formHeaderDescriptionStyles = css({
+  marginTop: "".concat(gridSize, "px")
+});
+var formHeaderTitleStyles = css({
+  marginTop: 0,
+  marginRight: "".concat(gridSize * 4, "px"),
+  lineHeight: "".concat(gridSize * 4, "px"),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var formHeaderWrapperStyles = css({
+  fontFamily: "".concat(fontFamily)
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH700Styles = css(h700({
+  theme: {
+    mode: 'dark'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH700Styles = css(h700({
+  theme: {
+    mode: 'light'
+  }
+}));
+
+var FormHeaderContent = function FormHeaderContent(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: formHeaderContentStyles
+  }, children);
+};
+
+var FormHeaderDescription = function FormHeaderDescription(_ref2) {
+  var children = _ref2.children;
+  return jsx("div", {
+    css: formHeaderDescriptionStyles
+  }, children);
+};
+
+var FormHeaderTitle = function FormHeaderTitle(_ref3) {
+  var children = _ref3.children;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  return jsx("h2", {
+    css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
+  }, children);
+};
+
+var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {
+  var children = _ref4.children;
+  return jsx("div", {
+    css: formHeaderWrapperStyles
+  }, children);
+};
+/**
+ * __Form header__
+ *
+ * A form header contains the form component's heading and subheadings. This provides the correct padding
+ * and styling for it.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ */
+
+
+var FormHeader = function FormHeader(_ref5) {
+  var children = _ref5.children,
+      description = _ref5.description,
+      title = _ref5.title;
+  return jsx(FormHeaderWrapper, null, title && jsx(FormHeaderTitle, null, title), description && jsx(FormHeaderDescription, null, description), jsx(FormHeaderContent, null, children));
+};
+
+export default FormHeader;
+export { FormHeaderContent, FormHeaderDescription, FormHeaderTitle };

package/dist/esm/form-section.js

@@ -0,0 +1,78 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h600 } from '@atlaskit/theme/typography';
+var gridSize = getGridSize();
+var formSectionDescriptionStyles = css({
+  marginTop: "".concat(gridSize, "px")
+});
+var formSectionTitleStyles = css({
+  marginTop: 0,
+  marginRight: "".concat(gridSize * 4, "px"),
+  lineHeight: "".concat(gridSize * 4, "px"),
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var formSectionWrapperStyles = css({
+  marginTop: "".concat(gridSize * 3, "px")
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH600Styles = css(h600({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH600Styles = css(h600({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+var FormSectionWrapper = function FormSectionWrapper(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: formSectionWrapperStyles
+  }, children);
+};
+
+var FormSectionTitle = function FormSectionTitle(_ref2) {
+  var children = _ref2.children;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  return jsx("h3", {
+    css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
+  }, children);
+};
+
+var FormSectionDescription = function FormSectionDescription(_ref3) {
+  var children = _ref3.children;
+  return jsx("div", {
+    css: formSectionDescriptionStyles
+  }, children);
+};
+/**
+ * __Form section__
+ *
+ * A form section is used to define a section of a form layout. This contains a section title, content
+ * and a description of the section.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
+ */
+
+
+var FormSection = function FormSection(_ref4) {
+  var children = _ref4.children,
+      description = _ref4.description,
+      title = _ref4.title;
+  return jsx(FormSectionWrapper, null, title && jsx(FormSectionTitle, null, title), description && jsx(FormSectionDescription, null, description), children);
+};
+
+export default FormSection;

package/dist/esm/{Form.js → form.js}

@@ -3,9 +3,21 @@ import React, { createContext, useCallback, useEffect, useRef, useState } from '
 import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
+
+/**
+ * __Form context__
+ *
+ * A form context creates a context for the field values and allows them to be accessed by the children.
+ */
 export var FormContext = /*#__PURE__*/createContext(function () {
   return function () {};
 });
+/**
+ * __Is disabled context__
+ *
+ * An is disabled context creates the context for when a value is disabled.
+ */
+
 export var IsDisabledContext = /*#__PURE__*/createContext(false);
 export default function Form(props) {
   var formRef = useRef(null);

package/dist/esm/index.js

@@ -1,9 +1,9 @@
-export { default } from './Form';
-export { default as FormHeader } from './FormHeader';
-export { default as FormFooter } from './FormFooter';
-export { default as FormSection } from './FormSection';
-export { default as Field } from './Field';
-export { default as CheckboxField } from './CheckboxField';
-export { default as RangeField } from './RangeField';
-export { HelperMessage, ErrorMessage, ValidMessage } from './Messages';
-export { default as Fieldset } from './Fieldset';
+export { default } from './form';
+export { default as FormHeader } from './form-header';
+export { default as FormFooter } from './form-footer';
+export { default as FormSection } from './form-section';
+export { default as Field } from './field';
+export { default as CheckboxField } from './checkbox-field';
+export { default as RangeField } from './range-field';
+export { HelperMessage, ErrorMessage, ValidMessage } from './messages';
+export { default as Fieldset } from './fieldset'; // eslint-disable-next-line import/no-unresolved

package/dist/esm/messages.js

@@ -0,0 +1,130 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
+import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { G400, N200, R400 } from '@atlaskit/theme/colors';
+import { useGlobalTheme } from '@atlaskit/theme/components';
+import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { h200 } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
+import { FieldId } from './field';
+var gridSize = getGridSize();
+var fontFamily = getFontFamily(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH200Styles = css(h200({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH200Styles = css(h200({
+  theme: {
+    mode: 'dark'
+  }
+}));
+var messageErrorColorStyles = css({
+  color: token('color.text.danger', R400)
+});
+var messageNeutralColorStyles = css({
+  color: token('color.text.lowEmphasis', N200)
+});
+var messageValidColorStyles = css({
+  color: token('color.text.success', G400)
+});
+var messageStyles = css({
+  display: 'flex',
+  marginTop: "".concat(gridSize * 0.5, "px"),
+  justifyContent: 'baseline',
+  fontFamily: "".concat(fontFamily),
+  fontWeight: 'normal'
+});
+var iconWrapperStyles = css({
+  display: 'flex'
+});
+
+var IconWrapper = function IconWrapper(_ref) {
+  var children = _ref.children;
+  return jsx("span", {
+    css: iconWrapperStyles
+  }, children);
+};
+
+var Message = function Message(_ref2) {
+  var children = _ref2.children,
+      error = _ref2.error,
+      valid = _ref2.valid,
+      fieldId = _ref2.fieldId,
+      testId = _ref2.testId;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
+  return jsx("div", {
+    css: [mode === 'light' ? lightH200Styles : darkH200Styles, messageStyles, error ? messageErrorColorStyles : valid ? messageValidColorStyles : messageNeutralColorStyles],
+    "data-testid": testId,
+    id: fieldId
+  }, children);
+};
+
+/**
+ * __Helper message__
+ *
+ * A helper message tells the user what kind of input the field takes. For example, a helper message could be
+ * 'Password should be more than 4 characters'
+ *
+ */
+export var HelperMessage = function HelperMessage(_ref3) {
+  var children = _ref3.children,
+      testId = _ref3.testId;
+  return jsx(FieldId.Consumer, null, function (fieldId) {
+    return jsx(Message, {
+      fieldId: fieldId ? "".concat(fieldId, "-helper") : undefined,
+      testId: testId
+    }, children);
+  });
+};
+/**
+ * __Error message__
+ *
+ * An error message is used to tell a user that the field input is invalid. For example, an error message could be
+ * 'Invalid username, needs to be more than 4 characters'.
+ *
+ */
+
+export var ErrorMessage = function ErrorMessage(_ref4) {
+  var children = _ref4.children,
+      testId = _ref4.testId;
+  return jsx(FieldId.Consumer, null, function (fieldId) {
+    return jsx(Message, {
+      error: true,
+      fieldId: fieldId ? "".concat(fieldId, "-error") : undefined,
+      testId: testId
+    }, jsx(IconWrapper, null, jsx(ErrorIcon, {
+      size: "small",
+      label: "error"
+    })), children);
+  });
+};
+/**
+ * __Valid message__
+ *
+ * A valid message is used to tell a user that the field input is valid. For example,
+ * a helper message could be 'Nice one, this username is available'.
+ *
+ */
+
+export var ValidMessage = function ValidMessage(_ref5) {
+  var children = _ref5.children,
+      testId = _ref5.testId;
+  return jsx(FieldId.Consumer, null, function (fieldId) {
+    return jsx(Message, {
+      fieldId: fieldId ? "".concat(fieldId, "-valid") : undefined,
+      testId: testId,
+      valid: true
+    }, jsx(IconWrapper, null, jsx(SuccessIcon, {
+      size: "small",
+      label: "success"
+    })), children);
+  });
+};

package/dist/esm/{RangeField.js → range-field.js}

@@ -7,8 +7,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React from 'react';
-import Field from './Field';
-
+import Field from './field';
+
+/**
+ * __Range field__
+ *
+ * A range field is where a user can submit a range input as a part of a form.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#rangefield-reference)
+ * - [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, ["children"]); // isInvalid and isRequired are specifically invalid for range inputs

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.3.1",
+	"version": "8.4.3",
 	"sideEffects": false
 }

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

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+import { FieldProps, Meta } from './field';
+export interface CheckboxFieldProps extends FieldProps<string | undefined> {
+    isChecked: boolean;
+}
+export interface CheckboxProps {
+    /**
+     * Content to render in the checkbox field. This is a function that is called with information about the field.
+     */
+    children: (args: {
+        fieldProps: CheckboxFieldProps;
+        error?: string;
+        valid: boolean;
+        meta: Meta;
+    }) => ReactNode;
+    /**
+     * Sets the default state of the checkbox as checked.
+     */
+    defaultIsChecked?: boolean;
+    /**
+     * Sets whether the field is required for submission. Required fields are marked with a red asterisk.
+     */
+    isRequired?: boolean;
+    /**
+     * Sets whether the field is disabled. Users cannot edit or focus on the fields. If the parent form component is disabled, then the field will always be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Label displayed beside the checkbox.
+     */
+    label?: ReactNode;
+    /**
+     * Specifies the name of the field. This is important for referencing the form data.
+     */
+    name: string;
+    /**
+     * The value of the checkbox. This is the value used in the form state when the checkbox is checked.
+     */
+    value?: string;
+}
+/**
+ * __Checkbox field__
+ *
+ * A checkbox field is a form field that lets users select an item. Users can check or uncheck the checkbox.
+ *
+ * - [Examples] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
+ * - [Code] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
+ * - [Usage] https://atlaskit.atlassian.com/packages/design-system/form/docs/fields#checkboxfield-reference
+ */
+declare const CheckboxField: FC<CheckboxProps>;
+export default CheckboxField;

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

@@ -0,0 +1,2 @@
+export { default as CheckboxField } from '../checkbox-field';
+export type { CheckboxFieldProps } from '../checkbox-field';

package/dist/types/entry-points/field.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../field';
+export type { FieldProps, Meta } from '../field';

package/dist/types/entry-points/fieldset.d.ts

@@ -0,0 +1 @@
+export { default as Fieldset } from '../fieldset';

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

@@ -0,0 +1 @@
+export { default as FormFooter } from '../form-footer';

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

@@ -0,0 +1 @@
+export { default as FormHeader } from '../form-header';

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

@@ -0,0 +1 @@
+export { default as FormSection } from '../form-section';

package/dist/types/entry-points/form.d.ts

@@ -0,0 +1 @@
+export { default } from '../form';

package/dist/types/entry-points/messages.d.ts

@@ -0,0 +1 @@
+export { HelperMessage, ErrorMessage, ValidMessage } from '../messages';

package/dist/types/entry-points/range-field.d.ts

@@ -0,0 +1,2 @@
+export { default as RangeField } from '../range-field';
+export type { RangeFieldProps } from '../range-field';