@bspk/ui 1.3.20 → 1.3.22

package/src/components/Select/Select.tsx

@@ -1,11 +1,11 @@
 import './select.scss';
 import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { useMemo, KeyboardEvent, MouseEvent } from 'react';
-import { useFieldInit } from '-/components/Field';
 import { ListItem, ListItemProps } from '-/components/ListItem';
 import { Menu, MenuProps } from '-/components/Menu';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useFloating } from '-/hooks/useFloating';
+import { useId } from '-/hooks/useId';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { CommonProps, ElementProps, FieldControlProps } from '-/types/common';
 import { getElementById } from '-/utils/dom';
@@ -82,9 +82,13 @@ export type SelectProps = CommonProps<'size'> &
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Select an option</FieldLabel>
+ *                 <Field
+ *                     controlId="example-select"
+ *                     helperText="The select allows you to choose one option from a list of options."
+ *                     label="Select an option"
+ *                 >
  *                     <Select
+ *                         id="example-select"
  *                         name="example-select"
  *                         onChange={setSelected}
  *                         options={OPTIONS}
@@ -93,9 +97,6 @@ export type SelectProps = CommonProps<'size'> &
  *                         size="medium"
  *                         value={selected}
  *                     />
- *                     <FieldDescription>
- *                         The select allows you to choose one option from a list of options.
- *                     </FieldDescription>
  *                 </Field>
  *             </div>
  *         );
@@ -112,22 +113,19 @@ export function Select({
     size = 'medium',
     disabled,
     id: idProp,
-    invalid: invalidProp,
+    invalid = false,
     readOnly,
     name,
     scrollLimit,
     required = false,
     'aria-label': ariaLabel,
     menuWidth,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...elementProps
 }: ElementProps<SelectProps, 'button'>) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+    const id = useId(idProp);
+
     const menuId = useMemo(() => `${id}-menu`, [id]);
 
     const { items, availableItems } = useMemo(() => {
@@ -188,6 +186,7 @@ export function Select({
                 aria-expanded={open}
                 aria-haspopup="listbox"
                 aria-readonly={readOnly || undefined}
+                aria-required={required || undefined}
                 data-bspk="select"
                 data-invalid={invalid || undefined}
                 data-open={open || undefined}

package/src/components/Select/SelectExample.tsx

@@ -2,7 +2,7 @@
 import { useState } from 'react';
 import { Select, SelectProps } from '.';
 import { Avatar } from '-/components/Avatar';
-import { Field, FieldDescription, FieldLabel } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { Tag } from '-/components/Tag';
 import { Txt } from '-/components/Txt';
 import { ComponentExample, Preset } from '-/utils/demo';
@@ -180,9 +180,13 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Select an option</FieldLabel>
+            <Field
+                controlId="example-select"
+                helperText="The select allows you to choose one option from a list of options."
+                label="Select an option"
+            >
                 <Select
+                    id="example-select"
                     name="example-select"
                     onChange={setSelected}
                     options={OPTIONS}
@@ -191,7 +195,6 @@ export const Usage = () => {
                     size="medium"
                     value={selected}
                 />
-                <FieldDescription>The select allows you to choose one option from a list of options.</FieldDescription>
             </Field>
         </div>
     );

package/src/components/SelectField/SelectField.rtl.test.tsx

@@ -1,28 +1,17 @@
-import { SelectField, SelectFieldProps } from './';
-import { presets } from '-/components/Select/SelectExample';
+import { SelectField } from '.';
 import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
-const nonPresetProps = {
-    name: 'Example name',
-    onChange: () => {},
-};
-
-const TestBed = (props: SelectFieldProps) => <SelectField {...props} placeholder="SelectField an option" />;
+const TestBed = () => (
+    <SelectField label="Example field label" name="example-field-name" onChange={() => {}} options={[]} value="" />
+);
 
 describe('SelectField (RTL)', () => {
-    presets.forEach((preset) => {
-        it(
-            `has no basic a11y issues - ${preset.label}`,
-            hasNoBasicA11yIssues(<TestBed label={preset.label} {...preset.propState} {...nonPresetProps} />),
-        );
-    });
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
 
     it('renders', () => {
-        const { queryByText } = render(
-            <TestBed label={presets[0].label} {...presets[0].propState} {...nonPresetProps} />,
-        );
+        const { getAllByLabelText } = render(<TestBed />);
 
-        expect(queryByText('SelectField an option')).toBeInTheDocument();
+        expect(getAllByLabelText('Example field label')[0]).toBeInTheDocument();
     });
 });

package/src/components/SelectField/SelectField.tsx

@@ -1,7 +1,8 @@
-import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
 import { Select, SelectProps } from '-/components/Select';
+import { useId } from '-/hooks/useId';
 
-export type SelectFieldProps = FormFieldControlProps<SelectProps>;
+export type SelectFieldProps = FieldControlProps<SelectProps>;
 
 /**
  * A field wrapper for the Select component.
@@ -9,7 +10,7 @@ export type SelectFieldProps = FormFieldControlProps<SelectProps>;
  * This component takes properties from the FormField and Select components.
  *
  * @name SelectField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
@@ -19,18 +20,21 @@ export function SelectField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: SelectFieldProps) {
+    const id = useId(idProp);
     return (
-        <FormField
+        <Field
+            controlId={id}
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
             style={style}
         >
-            <Select {...controlProps} />
-        </FormField>
+            <Select {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }
 

package/src/components/Slider/Slider.tsx

@@ -72,8 +72,7 @@ export type SliderProps<Value> = Pick<CommonPropsLibrary, 'disabled' | 'readOnly
  * track.
  *
  * @example
- *     import { Slider } from '@bspk/ui/Slider';
- *     import { useState } from 'react';
+ *     import { Slider } from '-/components/Slider';
  *
  *     () => {
  *         const [value, setValue] = useState(50);

package/src/components/Snackbar/Snackbar.tsx

@@ -83,7 +83,6 @@ export type SnackbarProps = CommonProps<'id'> & {
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
  *     import { Button } from '@bspk/ui/Button';
- *     import { useState } from 'react';
  *     import { sendSnackbar } from '@bspk/ui/Snackbar/Manager';
  *
  *     () => {

package/src/components/Switch/Switch.tsx

@@ -26,7 +26,6 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name'>
  * will more often be used in the SwitchOption component.
  *
  * @example
- *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
  *     () => {

package/src/components/TabGroup/TabGroup.tsx

@@ -18,7 +18,6 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  * Navigation tool that organizes content across different screens and views.
  *
  * @example
- *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
  *     () => {

package/src/components/TabList/TabList.tsx

@@ -123,7 +123,6 @@ export type TabListProps<O extends TabOption = TabOption> = {
  * See TabGroup or SegmentedControl for examples.
  *
  * @example
- *     import { useState } from 'react';
  *     import { TabList } from '@bspk/ui/TabList';
  *
  *     () => {

package/src/components/TabList/tab-list.scss

@@ -6,6 +6,7 @@ ul[data-bspk-utility='tab-list'] {
     list-style: none;
     height: var(--height);
     font: var(--font);
+    width: fit-content; // default to hug content
 
     &[data-width='fill'] {
         align-items: stretch;

package/src/components/Table/table.scss

@@ -5,6 +5,7 @@
     --grey-background: var(--surface-neutral-t2-lowest);
     --icon-size: var(--spacing-sizing-05);
 
+    display: block;
     min-width: 100%;
     overflow: auto hidden;
     border-collapse: separate;
@@ -135,7 +136,7 @@
                         z-index: var(--z-index-focus);
                         inset: 0;
                         outline: solid 2px var(--stroke-neutral-focus);
-                        outline-offset: -2px;
+                        isolation: isolate;
                     }
                 }
             }

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,5 @@
 import './textarea.scss';
 import { ChangeEvent, useRef } from 'react';
-import { useFieldInit } from '-/components/Field';
 import { CommonProps, FieldControlProps, SetRef } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
@@ -46,18 +45,15 @@ export type TextareaProps = CommonProps<'size'> &
  * For a more complete example with field usage, see the TextareaField component.
  *
  * @example
- *     import { useState } from 'react';
- *     import { Textarea } from '@bspk/ui/Textarea';
+ *     import { Textarea } from '-/components/Textarea';
  *
  *     () => {
  *         const [value, setValue] = useState<string | undefined>('');
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Example Textarea</FieldLabel>
- *                     <Textarea name="example-name" onChange={setValue} value={value} />
- *                     <FieldDescription>This is an example textarea field.</FieldDescription>
+ *                 <Field controlId="example-textarea" helperText="This is an example textarea field." label="Textarea">
+ *                     <Textarea id="example-textarea" name="example-name" onChange={setValue} value={value} />
  *                 </Field>
  *             </div>
  *         );
@@ -69,30 +65,24 @@ export type TextareaProps = CommonProps<'size'> &
  * @phase Stable
  */
 export function Textarea({
-    invalid: invalidProp,
+    invalid = false,
     onChange,
     size = 'medium',
     value = '',
     name,
     innerRef,
     placeholder,
-    id: idProp,
+    id,
     minRows = 4,
     maxRows = 10,
     required = false,
     readOnly,
     disabled,
     'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...otherProps
 }: TextareaProps) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
-
     const onInput = () => {
         const target = textareaElement.current;
         if (!target) return;
@@ -137,6 +127,7 @@ export function Textarea({
                     textareaElement.current = node;
                     onInput();
                 }}
+                required={required || undefined}
                 value={value}
                 wrap="hard"
             />

package/src/components/Textarea/TextareaExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Textarea, TextareaProps } from '.';
-import { Field, FieldDescription, FieldLabel } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const TextareaExample: ComponentExample<TextareaProps> = {
@@ -19,10 +19,8 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Example Textarea</FieldLabel>
-                <Textarea name="example-name" onChange={setValue} value={value} />
-                <FieldDescription>This is an example textarea field.</FieldDescription>
+            <Field controlId="example-textarea" helperText="This is an example textarea field." label="Textarea">
+                <Textarea id="example-textarea" name="example-name" onChange={setValue} value={value} />
             </Field>
         </div>
     );

package/src/components/TextareaField/TextareaField.tsx

@@ -1,7 +1,8 @@
-import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
 import { Textarea, TextareaProps } from '-/components/Textarea';
+import { useId } from '-/hooks/useId';
 
-export type TextareaFieldProps = FormFieldControlProps<TextareaProps>;
+export type TextareaFieldProps = FieldControlProps<TextareaProps>;
 
 /**
  * A field wrapper for the Textarea component.
@@ -9,7 +10,7 @@ export type TextareaFieldProps = FormFieldControlProps<TextareaProps>;
  * This component takes properties from the FormField and Textarea components.
  *
  * @name TextareaField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
@@ -19,18 +20,21 @@ export function TextareaField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: TextareaFieldProps) {
+    const id = useId(idProp);
     return (
-        <FormField
+        <Field
+            controlId={id}
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
             style={style}
         >
-            <Textarea {...controlProps} />
-        </FormField>
+            <Textarea {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }
 

package/src/components/TimePicker/TimePicker.tsx

@@ -13,11 +13,11 @@ import {
     stringValueToParts,
 } from './utils';
 import { Button } from '-/components/Button';
-import { useFieldInit } from '-/components/Field';
 import { InputProps } from '-/components/Input';
 import { Menu } from '-/components/Menu';
 import { Portal } from '-/components/Portal';
 import { useFloating } from '-/hooks/useFloating';
+import { useId } from '-/hooks/useId';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { ElementProps, FieldControlProps } from '-/types/common';
 import { handleKeyDown } from '-/utils/handleKeyDown';
@@ -31,17 +31,19 @@ export type TimePickerProps = FieldControlProps & Pick<InputProps, 'size'>;
  * For a more complete example with field usage, see the TimePickerField component.
  *
  * @example
- *     import { TimePicker } from '@bspk/ui/TimePicker';
+ *     import { TimePicker } from '-/components/TimePicker';
  *
  *     () => {
  *         const [value, onChange] = useState<string | undefined>('');
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Time</FieldLabel>
- *                     <TimePicker name="time" onChange={onChange} value={value} />
- *                     <FieldDescription>The time picker allows you to select a time.</FieldDescription>
+ *                 <Field
+ *                     controlId="destination-time"
+ *                     helperText="The time picker allows you to select a time."
+ *                     label="Time"
+ *                 >
+ *                     <TimePicker id="destination-time" name="time" onChange={onChange} value={value} />
  *                 </Field>
  *             </div>
  *         );
@@ -54,22 +56,17 @@ export function TimePicker({
     value,
     disabled,
     id: idProp,
-    invalid: invalidProp,
+    invalid = false,
     readOnly,
     name,
     size,
-    required = false,
     onChange: onChangeProp,
     'aria-label': ariaLabel = 'Time picker',
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
     ...props
 }: ElementProps<TimePickerProps, 'div'>) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+    const id = useId(idProp);
 
     const menuId = `${id}-time-picker-menu`;
 

package/src/components/TimePicker/TimePickerExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TimePicker, TimePickerProps } from './TimePicker';
-import { Field, FieldLabel, FieldDescription } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const TimePickerExample: ComponentExample<TimePickerProps> = {
@@ -17,10 +17,8 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Time</FieldLabel>
-                <TimePicker name="time" onChange={onChange} value={value} />
-                <FieldDescription>The time picker allows you to select a time.</FieldDescription>
+            <Field controlId="destination-time" helperText="The time picker allows you to select a time." label="Time">
+                <TimePicker id="destination-time" name="time" onChange={onChange} value={value} />
             </Field>
         </div>
     );

package/src/components/TimePickerField/TimePickerField.tsx

@@ -1,7 +1,8 @@
-import { FormField, FormFieldControlProps } from '-/components/FormField';
+import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
 import { TimePicker, TimePickerProps } from '-/components/TimePicker';
+import { useId } from '-/hooks/useId';
 
-export type TimePickerFieldProps = FormFieldControlProps<TimePickerProps>;
+export type TimePickerFieldProps = FieldControlProps<TimePickerProps>;
 
 /**
  * A field wrapper for the TimePicker component.
@@ -9,7 +10,7 @@ export type TimePickerFieldProps = FormFieldControlProps<TimePickerProps>;
  * This component takes properties from the FormField and TimePicker components.
  *
  * @name TimePickerField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
@@ -19,18 +20,21 @@ export function TimePickerField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: TimePickerFieldProps) {
+    const id = useId(idProp);
     return (
-        <FormField
+        <Field
+            controlId={id}
             errorMessage={errorMessage}
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
             style={style}
         >
-            <TimePicker {...controlProps} />
-        </FormField>
+            <TimePicker {...propsWithAria({ id, controlProps, errorMessage, helperText })} />
+        </Field>
     );
 }
 

package/src/types/common.ts

@@ -164,6 +164,14 @@ export type FieldControlProps<
      * @required
      */
     onChange: (next: ValueType | undefined, event?: ChangeContext) => void;
+    /*
+     * The aria-describedby attribute for the field control.
+     */
+    'aria-describedby'?: string;
+    /*
+     * The aria-errormessage attribute for the field control.
+     */
+    'aria-errormessage'?: string;
 };
 
 export type Brand =

package/src/utils/demo.ts

@@ -228,7 +228,7 @@ export function componentToString<Props extends Record<string, any> = Record<str
                 formattedValue = `{${componentToString(subComponentName, value.props)}}`;
             } else if (Array.isArray(value)) {
                 return ` ${key}={[${value
-                    .map((item) => (isValidElement(item) ? convertReactToCodeString(item) : '...')) // Simplified for brevity
+                    .map((item) => (isValidElement(item) ? convertReactToCodeString(item) : item))
                     .join(', ')}]}`;
             } else if (typeof value === 'object') {
                 formattedValue = `{${JSON.stringify(value, null, 2)}}`;

package/dist/components/Field/FieldDescription.d.ts

@@ -1,9 +0,0 @@
-/**
- * FieldDescription component displays a description associated with a form field.
- *
- * @name FieldDescription
- * @parent Field
- */
-export declare function FieldDescription({ children }: {
-    children?: string;
-}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Field/FieldDescription.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useFieldContext, describedById } from './utils';
-/**
- * FieldDescription component displays a description associated with a form field.
- *
- * @name FieldDescription
- * @parent Field
- */
-export function FieldDescription({ children }) {
-    const { id } = useFieldContext();
-    return children ? (_jsx("p", { "data-bspk": "field-description", id: describedById(id), children: children })) : null;
-}
-//# sourceMappingURL=FieldDescription.js.map

package/dist/components/Field/FieldDescription.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FieldDescription.js","sourceRoot":"","sources":["../../../src/components/Field/FieldDescription.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,QAAQ,EAAyB;IAChE,MAAM,EAAE,EAAE,EAAE,GAAG,eAAe,EAAE,CAAC;IAEjC,OAAO,QAAQ,CAAC,CAAC,CAAC,CACd,yBAAa,mBAAmB,EAAC,EAAE,EAAE,aAAa,CAAC,EAAE,CAAC,YACjD,QAAQ,GACT,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC"}

package/dist/components/Field/FieldError.d.ts

@@ -1,11 +0,0 @@
-export type FieldErrorProps = {
-    /** The error message text. */
-    children?: string;
-};
-/**
- * FieldError component displays an error message associated with a form field.
- *
- * @name FieldError
- * @parent Field
- */
-export declare function FieldError({ children }: FieldErrorProps): "" | import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/Field/FieldError.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { errorMessageId, useFieldContext } from './utils';
-import { InlineAlert } from '../InlineAlert';
-/**
- * FieldError component displays an error message associated with a form field.
- *
- * @name FieldError
- * @parent Field
- */
-export function FieldError({ children }) {
-    const { id } = useFieldContext();
-    return (children && (_jsx(InlineAlert, { id: errorMessageId(id), owner: "field-error", variant: "error", children: children })));
-}
-//# sourceMappingURL=FieldError.js.map

package/dist/components/Field/FieldError.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FieldError.js","sourceRoot":"","sources":["../../../src/components/Field/FieldError.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAmB;IACpD,MAAM,EAAE,EAAE,EAAE,GAAG,eAAe,EAAE,CAAC;IAEjC,OAAO,CACH,QAAQ,IAAI,CACR,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,OAAO,YACnE,QAAQ,GACC,CACjB,CACJ,CAAC;AACN,CAAC"}

package/dist/components/Field/FieldLabel.d.ts

@@ -1,21 +0,0 @@
-import { ElementType } from 'react';
-import { FieldContext } from './utils';
-import { ElementProps } from '-/types/common';
-export type FieldLabelProps<As extends ElementType = ElementType> = Pick<FieldContext, 'labelTrailing' | 'required'> & {
-    /** The label text. */
-    children: string;
-    /**
-     * The element type to render as.
-     *
-     * @default label
-     * @type ElementType
-     */
-    as?: As;
-};
-/**
- * FieldLabel component displays a label associated with a form field.
- *
- * @name FieldLabel
- * @parent Field
- */
-export declare function FieldLabel<As extends ElementType = ElementType>({ children, labelTrailing, as, ...props }: ElementProps<FieldLabelProps<As>, As>): import("react/jsx-runtime").JSX.Element;