@pingux/astro 2.52.0-alpha.0 → 2.52.0-alpha.2

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -24,6 +24,7 @@ var _reactAria = require("react-aria");
 var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uuid = require("uuid");
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _Box = _interopRequireDefault(require("../Box"));
@@ -31,7 +32,6 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _Label = _interopRequireDefault(require("../Label"));
-var _constants = require("../Label/constants");
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _react2 = require("@emotion/react");
@@ -87,7 +87,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     variant: "forms.select.currentValue"
   }, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_Text["default"], {
     variant: "placeholder"
-  }, labelMode === _constants.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
+  }, labelMode === _labelModes.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
     variant: "loader.withinInput"
   }), (0, _react2.jsx)(_Box["default"], {
     as: "span",
@@ -127,7 +127,7 @@ SelectFieldBase.propTypes = _objectSpread(_objectSpread({
   /** The label for the select element. */
   label: _propTypes["default"].node,
   /** Determines the textarea status indicator and helper text styling. Eg. float. */
-  labelMode: _propTypes["default"].oneOf((0, _values["default"])(_constants.modes)),
+  labelMode: _propTypes["default"].oneOf((0, _values["default"])(_labelModes.modes)),
   /** The name for the select element, used when submitting a form. */
   name: _propTypes["default"].string,
   /** Temporary text that occupies the text input when it is empty. */

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.test.js

@@ -12,10 +12,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
-var _constants = require("../Label/constants");
 var _SelectFieldBase = _interopRequireDefault(require("./SelectFieldBase"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -142,7 +142,7 @@ test('select field with helper text', function () {
 });
 test("label floats after user's interacting", function () {
   getComponent({
-    labelMode: _constants.modes.FLOAT,
+    labelMode: _labelModes.modes.FLOAT,
     value: ''
   });
   var textAreaContainer = _testWrapper.screen.getByTestId(testId);

package/lib/cjs/components/Table/Table.styles.d.ts

@@ -24,10 +24,10 @@ declare const _default: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
     };
     head: {
         fontWeight: number;
@@ -38,10 +38,10 @@ declare const _default: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: import("../..").overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: import("../..").wordWrap;
+        wordBreak: import("../..").wordBreak;
     };
     row: {
         width: string;

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -1,11 +1,12 @@
 import { ThemeUICSSObject } from 'theme-ui';
+import { overflowWrap, wordBreak, wordWrap as wordWrapText } from '../../types';
 export declare const base: ThemeUICSSObject;
 export declare const wordWrap: {
     display: string;
-    overflowWrap: string;
+    overflowWrap: overflowWrap;
     maxWidth: string;
-    wordWrap: string;
-    wordBreak: string;
+    wordWrap: wordWrapText;
+    wordBreak: wordBreak;
 };
 export declare const text: {
     inputValue: {
@@ -19,10 +20,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     itemSubtitle: {
         fontSize: string;
@@ -30,10 +31,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     label: {
         fontSize: string;
@@ -41,10 +42,10 @@ export declare const text: {
         fontFamily: string;
         fontWeight: number;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     listTitle: {
         textOverflow: string;
@@ -54,10 +55,10 @@ export declare const text: {
         fontWeight: number;
         color: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     listSubtitle: {
         textOverflow: string;
@@ -67,10 +68,10 @@ export declare const text: {
         fontWeight: number;
         color: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     listViewItemSubtext: {
         textOverflow: string;
@@ -83,10 +84,10 @@ export declare const text: {
         fontFamily: string;
         fontWeight: number;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     listViewItemText: {
         textOverflow: string;
@@ -98,10 +99,10 @@ export declare const text: {
         fontFamily: string;
         fontWeight: number;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     placeholder: {
         fontWeight: number;
@@ -116,10 +117,10 @@ export declare const text: {
         fontFamily: string;
         fontWeight: number;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     panelHeaderText: {
         alignSelf: string;
@@ -128,10 +129,10 @@ export declare const text: {
         fontFamily: string;
         fontWeight: number;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     sectionTitle: {
         fontSize: string;
@@ -139,20 +140,20 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     subtitle: {
         color: string;
         fontFamily: string;
         fontWeight: number;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     tabLabel: {
         fontSize: string;
@@ -172,10 +173,10 @@ export declare const text: {
             color: string;
         };
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
         grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
         accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
         alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;
@@ -1010,10 +1011,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     tableData: {
         fontSize: string;
@@ -1021,10 +1022,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     textEllipsis: {
         textOverflow: string;
@@ -1037,10 +1038,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     H1: {
         lineHeight: string;
@@ -1049,10 +1050,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     H2: {
         lineHeight: string;
@@ -1061,10 +1062,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     H3: {
         lineHeight: string;
@@ -1073,10 +1074,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     H4: {
         lineHeight: string;
@@ -1085,10 +1086,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     h1: {
         fontWeight: number;
@@ -1096,10 +1097,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     h2: {
         fontWeight: number;
@@ -1107,10 +1108,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     h3: {
         fontWeight: number;
@@ -1118,10 +1119,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     h4: {
         fontSize: string;
@@ -1129,10 +1130,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     base: ThemeUICSSObject;
     bodyStrong: {
@@ -1140,20 +1141,20 @@ export declare const text: {
         fontFamily: string;
         fontWeight: number;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     bodyWeak: {
         fontSize: string;
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     buttonLabel: {
         fontSize: string;
@@ -1161,10 +1162,10 @@ export declare const text: {
         color: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     buttonTitle: {
         fontSize: string;
@@ -1173,10 +1174,10 @@ export declare const text: {
         fontFamily: string;
         lineHeight: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     buttonSubtitle: {
         fontSize: string;
@@ -1185,20 +1186,20 @@ export declare const text: {
         fontFamily: string;
         lineHeight: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     capsLabel: {
         color: string;
         textTransform: string;
         fontFamily: string;
         display: string;
-        overflowWrap: string;
+        overflowWrap: overflowWrap;
         maxWidth: string;
-        wordWrap: string;
-        wordBreak: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
     };
     environmentBreadcrumb: {
         fontSize: string;

package/lib/cjs/components/TextAreaField/TextAreaField.stories.js

@@ -23,10 +23,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _SearchIcon = _interopRequireDefault(require("@pingux/mdi-react/SearchIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
-var _constants = require("../Label/constants");
 var _TextAreaField = _interopRequireDefault(require("./TextAreaField.mdx"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -55,7 +55,7 @@ var _default = {
     labelMode: {
       control: {
         type: 'select',
-        options: (0, _values["default"])(_constants.modes)
+        options: (0, _values["default"])(_labelModes.modes)
       }
     },
     defaultValue: {},
@@ -88,7 +88,7 @@ var _default = {
   }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
   args: {
     label: 'Example Label',
-    labelMode: (0, _values["default"])(_constants.modes)[0]
+    labelMode: (0, _values["default"])(_labelModes.modes)[0]
   }
 };
 exports["default"] = _default;

package/lib/cjs/components/TextField/TextField.stories.js

@@ -25,11 +25,11 @@ var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
 var _index = require("../../index");
+var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _CopyButton = _interopRequireDefault(require("../CopyText/CopyButton"));
-var _constants = require("../Label/constants");
 var _TextField = _interopRequireDefault(require("./TextField.mdx"));
 var _react2 = require("@emotion/react");
 var _excluded = ["variant"];
@@ -54,7 +54,7 @@ var _default = {
     labelMode: {
       control: {
         type: 'select',
-        options: (0, _values["default"])(_constants.modes)
+        options: (0, _values["default"])(_labelModes.modes)
       }
     },
     label: {
@@ -69,7 +69,7 @@ var _default = {
     }
   }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
   args: {
-    labelMode: (0, _values["default"])(_constants.modes)[0]
+    labelMode: (0, _values["default"])(_labelModes.modes)[0]
   }
 };
 exports["default"] = _default;

package/lib/cjs/hooks/useColumnStyles/useColumnStyles.d.ts

@@ -1,6 +1,6 @@
-export type LabelMode = 'default' | 'float' | 'left';
+import { LabelModeProps } from '../../types';
 interface UseColumnStylesProps {
-    labelMode: LabelMode;
+    labelMode: LabelModeProps;
 }
 interface LabelStyleProps {
     sx: {

package/lib/cjs/hooks/useField/useField.d.ts

@@ -1,7 +1,6 @@
 import { Key } from 'react';
 import { AriaLabelingProps, CollectionChildren, DOMProps } from '@react-types/shared';
-import { LabelProps as ThemeUILabelProps } from 'theme-ui';
-import { BoxProps } from '../../types';
+import { BoxProps, LabelModeProps, LabelProps } from '../../types';
 /**
  * Generates the necessary props to be used in field components.
  * @param {{}} props Props for the field
@@ -16,12 +15,6 @@ interface WrapperProps extends BoxProps {
 interface ContainerProps extends WrapperProps {
     isFloatLabelActive?: boolean;
 }
-interface LabelProps extends ThemeUILabelProps {
-    labelMode?: 'default' | 'float' | 'left';
-    statusClasses?: {
-        [className: string]: boolean;
-    };
-}
 export interface FieldControlInputProps extends AriaLabelingProps, DOMProps {
     autoComplete?: string;
     autoCorrect?: string;
@@ -74,7 +67,7 @@ export interface UseFieldProps<T> {
     isRestrictiveMultivalues?: boolean;
     isSelected?: boolean;
     label?: string;
-    labelMode?: string;
+    labelMode?: LabelModeProps;
     labelProps?: LabelProps;
     maxLength?: number;
     name?: string;
@@ -1051,13 +1044,20 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         onTransitionEndCapture?: import("react").TransitionEventHandler<import("../../types").FocusableElement> | undefined;
     };
     fieldLabelProps: {
-        labelMode?: "float" | "left" | "default" | undefined;
+        children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
+        className: string;
+        isDisabled?: boolean | undefined;
+        isRequired: boolean | undefined;
+        mode: LabelModeProps | undefined;
+        labelMode?: LabelModeProps | undefined;
+        requiredIndicator?: import("react").ReactNode;
+        hintText: string | undefined;
+        helpHintProps?: import("../../types").HelpHintProps | undefined;
         statusClasses?: {
             [className: string]: boolean;
         } | undefined;
         form?: string | undefined;
         role?: import("react").AriaRole | undefined;
-        className: string;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "false" | "true") | undefined;
         'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
@@ -1118,7 +1118,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         slot?: string | undefined;
         title?: string | undefined;
         id?: string | undefined;
-        children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;
@@ -1362,17 +1361,22 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        hintText: string | undefined;
-        isRequired: boolean | undefined;
-        mode: string | undefined;
+        'data-testid'?: string | undefined;
     } | {
-        labelMode?: "float" | "left" | "default" | undefined;
+        children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
+        className: string;
+        isDisabled?: boolean | undefined;
+        isRequired: boolean | undefined;
+        mode: LabelModeProps | undefined;
+        labelMode?: LabelModeProps | undefined;
+        requiredIndicator?: import("react").ReactNode;
+        hintText: string | undefined;
+        helpHintProps?: import("../../types").HelpHintProps | undefined;
         statusClasses?: {
             [className: string]: boolean;
         } | undefined;
         form?: string | undefined;
         role?: import("react").AriaRole | undefined;
-        className: string;
         'aria-activedescendant'?: string | undefined;
         'aria-atomic'?: (boolean | "false" | "true") | undefined;
         'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
@@ -1433,7 +1437,6 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         slot?: string | undefined;
         title?: string | undefined;
         id?: string | undefined;
-        children: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
         } | undefined;
@@ -1677,9 +1680,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
         bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         backgroundColor?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
         opacity?: import("styled-system").ResponsiveValue<import("csstype").Property.Opacity, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
-        hintText: string | undefined;
-        isRequired: boolean | undefined;
-        mode: string | undefined;
+        'data-testid'?: string | undefined;
     };
 };
 export default useField;