@cube-dev/ui-kit 0.27.2 → 0.28.0

package/es/components/forms/Checkbox/Checkbox.js

@@ -1,16 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFocusableRef } from '@react-spectrum/utils';
-import { forwardRef, useContext, useRef } from 'react';
-import { useCheckbox, useCheckboxGroupItem } from '@react-aria/checkbox';
-import { useHover } from '@react-aria/interactions';
-import { useToggleState } from '@react-stately/toggle';
+import { forwardRef, useContext, useMemo, useRef } from 'react';
+import { useCheckbox, useCheckboxGroupItem, useHover } from 'react-aria';
+import { useToggleState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { BLOCK_STYLES, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
@@ -18,16 +17,16 @@ import { mergeProps } from '../../../utils/react';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
 import { useFieldProps, useFormProps } from '../Form';
-import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
 import { Text } from '../../content/Text';
+import { wrapWithField } from '../wrapper';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
 function CheckOutlined() {
     return (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }) }));
 }
 function IndeterminateOutline() {
-    return (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }) }));
+    return (_jsx("svg", { width: "8", height: "2", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }) }));
 }
 const CheckboxWrapperElement = tasty({
     as: 'label',
@@ -41,6 +40,7 @@ const CheckboxWrapperElement = tasty({
         flow: 'row',
         preset: 'default',
         cursor: 'pointer',
+        width: 'max max-content',
     },
 });
 const CheckboxElement = tasty({
@@ -92,13 +92,13 @@ function Checkbox(props, ref) {
         }),
         unsafe__isDisabled: !!groupState,
     });
-    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, autoFocus, children, label, extra, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, labelSuffix, ...otherProps } = props;
+    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, children, label, validationState, labelProps, labelStyles, labelPosition, inputStyles, isHidden, ...otherProps } = props;
     let styles = extractStyles(props, OUTER_STYLES);
-    let inputStyles = extractStyles(props, BLOCK_STYLES);
-    labelStyles = {
-        ...(insideForm && !groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),
+    inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
+    labelStyles = useMemo(() => ({
+        ...(insideForm ? LABEL_STYLES : INLINE_LABEL_STYLES),
         ...labelStyles,
-    };
+    }), [insideForm, labelStyles]);
     let { isFocused, focusProps } = useFocus({ isDisabled }, true);
     let { hoverProps, isHovered } = useHover({ isDisabled });
     let inputRef = useRef(null);
@@ -143,30 +143,15 @@ function Checkbox(props, ref) {
         'side-label': labelPosition === 'side',
         'inside-form': insideForm,
     };
-    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }), children && _jsx(Text, { children: children })] }));
+    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(CheckboxElement, { qa: qa || 'Checkbox', mods: mods, styles: inputStyles, children: markIcon }), children && _jsx(Text, { nowrap: true, children: children })] }));
     if (insideForm && !groupState) {
-        return (_jsx(FieldWrapper, { ...{
-                as: 'label',
-                labelPosition,
-                label,
-                extra,
-                styles,
-                isRequired,
-                labelStyles,
-                isHidden,
-                labelProps,
-                isDisabled,
-                validationState,
-                necessityLabel,
-                necessityIndicator,
-                message,
-                description,
-                requiredMark,
-                tooltip,
-                labelSuffix,
-                Component: checkboxField,
-                ref: domRef,
-            } }));
+        return wrapWithField(checkboxField, domRef, {
+            ...props,
+            children: null,
+            labelStyles,
+            inputStyles,
+            styles,
+        });
     }
     return (_jsxs(CheckboxWrapperElement, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label ? (_jsx(Element, { styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',

package/es/components/forms/Checkbox/CheckboxGroup.js

@@ -1,20 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useDOMRef } from '@react-spectrum/utils';
-import { useCheckboxGroup } from '@react-aria/checkbox';
-import { useCheckboxGroupState } from '@react-stately/checkbox';
+import { useCheckboxGroup } from 'react-aria';
+import { useCheckboxGroupState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
-import { extractFieldWrapperProps, FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
 import { useFieldProps, FormContext, useFormProps } from '../Form';
+import { mergeProps } from '../../../utils/react';
+import { wrapWithField } from '../wrapper';
 import { CheckboxGroupContext } from './context';
 const CheckGroupElement = tasty({
     qa: 'CheckboxGroup',
@@ -43,10 +44,9 @@ function CheckboxGroup(props, ref) {
             onChange: onChange,
         }),
     });
-    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = 'vertical', message, description, labelStyles, tooltip, labelSuffix, inputStyles, ...otherProps } = props;
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, validationState, children, orientation = 'vertical', message, description, labelStyles, tooltip, labelProps: baseLabelProps, labelSuffix, inputStyles, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     let styles = extractStyles(otherProps, CONTAINER_STYLES);
-    let { fieldWrapperProps } = extractFieldWrapperProps(props);
     let state = useCheckboxGroupState(props);
     let { groupProps, labelProps } = useCheckboxGroup(props, state);
     let radioGroup = (_jsx(CheckGroupElement, { styles: inputStyles, mods: {
@@ -55,7 +55,13 @@ function CheckboxGroup(props, ref) {
                 isDisabled,
                 validationState,
             }, children: _jsx(CheckboxGroupContext.Provider, { value: state, children: children }) }) }));
-    return (_jsx(FieldWrapper, { ...fieldWrapperProps, ref: domRef, Component: radioGroup, fieldProps: groupProps, labelProps: labelProps, styles: styles }));
+    return wrapWithField(radioGroup, domRef, {
+        ...props,
+        children: null,
+        fieldProps: groupProps,
+        labelProps: mergeProps(baseLabelProps, labelProps),
+        styles,
+    });
 }
 /**
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.

package/es/components/forms/Checkbox/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/DateInput.js

@@ -1,16 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
 import { createCalendar } from '@internationalized/date';
-import { useDateField } from '@react-aria/datepicker';
-import { useDateFieldState } from '@react-stately/datepicker';
-import { useLocale } from '@react-aria/i18n';
+import { useDateField, useLocale } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { wrapWithField } from '../wrapper';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';

package/es/components/forms/DatePicker/DateInputBase.js

@@ -1,18 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { mergeProps, mergeRefs } from '@react-aria/utils';
 import React, { cloneElement, useRef } from 'react';
-import { useFocusRing } from '@react-aria/focus';
+import { mergeRefs } from '@react-aria/utils';
+import { useFocusRing } from 'react-aria';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
+import { mergeProps } from '../../../utils/react';
 const DateInputWrapperElement = tasty({
     qa: 'DateInputWrapper',
     role: 'presentation',

package/es/components/forms/DatePicker/DatePicker.js

@@ -1,15 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { useDatePicker } from '@react-aria/datepicker';
-import { useDatePickerState } from '@react-stately/datepicker';
-import { useFocusRing } from '@react-aria/focus';
+import { useDatePicker, useFocusRing } from 'react-aria';
+import { useDatePickerState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { wrapWithField } from '../wrapper';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';

package/es/components/forms/DatePicker/DatePickerButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/DatePickerElement.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/DatePickerInput.js

@@ -1,16 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { createCalendar } from '@internationalized/date';
-import { useDateField } from '@react-aria/datepicker';
-import { useDateFieldState } from '@react-stately/datepicker';
-import { useLocale } from '@react-aria/i18n';
+import { useDateField, useLocale } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
 import { tasty } from '../../../tasty';
 import { DatePickerSegment } from './DatePickerSegment';
 import { formatSegments } from './utils';

package/es/components/forms/DatePicker/DatePickerSegment.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { useDateSegment } from '@react-aria/datepicker';
+import { useDateSegment } from 'react-aria';
 import { tasty } from '../../../tasty';
 const LiteralSegmentElement = tasty({
     qa: 'LiteralSegment',

package/es/components/forms/DatePicker/DateRangePicker.js

@@ -1,15 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { useDateRangePicker } from '@react-aria/datepicker';
-import { useDateRangePickerState } from '@react-stately/datepicker';
-import { useFocusRing } from '@react-aria/focus';
+import { useDateRangePicker, useFocusRing } from 'react-aria';
+import { useDateRangePickerState } from 'react-stately';
 import { useProviderProps } from '../../../provider';
 import { wrapWithField } from '../wrapper';
 import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';

package/es/components/forms/DatePicker/TimeInput.js

@@ -1,15 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { useLocale } from '@react-aria/i18n';
-import { useTimeField } from '@react-aria/datepicker';
-import { useTimeFieldState } from '@react-stately/datepicker';
+import { useLocale, useTimeField, } from 'react-aria';
+import { useTimeFieldState } from 'react-stately';
 import { wrapWithField } from '../wrapper';
 import { useProviderProps } from '../../../provider';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';

package/es/components/forms/DatePicker/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/intl.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/parseDate.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/props.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/DatePicker/utils.js

@@ -1,58 +1,64 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 import { createDOMRef } from '@react-spectrum/utils';
 import { createFocusManager } from '@react-aria/focus';
-import { useDateFormatter } from '@react-aria/i18n';
-import { useDisplayNames } from '@react-aria/datepicker';
-import { useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { useLayoutEffect } from '@react-aria/utils';
-export function useFormatHelpText(props) {
-    let formatter = useDateFormatter({ dateStyle: 'short' });
-    let displayNames = useDisplayNames();
-    return useMemo(() => {
-        if (props.description) {
-            return props.description;
-        }
-        if (props.showFormatHelpText) {
-            return formatter
-                .formatToParts(new Date())
-                .map((s) => {
-                if (s.type === 'literal') {
-                    return s.value;
-                }
-                return displayNames.of(s.type);
-            })
-                .join(' ');
-        }
-        return '';
-    }, [props.description, props.showFormatHelpText, formatter, displayNames]);
-}
-export function useVisibleMonths(maxVisibleMonths) {
-    let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths('large'));
-    useLayoutEffect(() => {
-        let onResize = () => setVisibleMonths(getVisibleMonths('large'));
-        onResize();
-        window.addEventListener('resize', onResize);
-        return () => {
-            window.removeEventListener('resize', onResize);
-        };
-    }, []);
-    return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));
-}
-function getVisibleMonths(scale) {
-    if (typeof window === 'undefined') {
-        return 1;
-    }
-    let monthWidth = scale === 'large' ? 336 : 280;
-    let gap = scale === 'large' ? 30 : 24;
-    let popoverPadding = scale === 'large' ? 32 : 48;
-    return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));
-}
+import { useImperativeHandle, useRef } from 'react';
+// export function useFormatHelpText(
+//   props: Pick<SpectrumDatePickerBase, 'description' | 'showFormatHelpText'>,
+// ) {
+//   let formatter = useDateFormatter({ dateStyle: 'short' });
+//   let displayNames = useDisplayNames();
+//   return useMemo(() => {
+//     if (props.description) {
+//       return props.description;
+//     }
+//
+//     if (props.showFormatHelpText) {
+//       return formatter
+//         .formatToParts(new Date())
+//         .map((s) => {
+//           if (s.type === 'literal') {
+//             return s.value;
+//           }
+//
+//           return displayNames.of(s.type);
+//         })
+//         .join(' ');
+//     }
+//
+//     return '';
+//   }, [props.description, props.showFormatHelpText, formatter, displayNames]);
+// }
+// export function useVisibleMonths(maxVisibleMonths: number) {
+//   let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths('large'));
+//   useLayoutEffect(() => {
+//     let onResize = () => setVisibleMonths(getVisibleMonths('large'));
+//     onResize();
+//
+//     window.addEventListener('resize', onResize);
+//     return () => {
+//       window.removeEventListener('resize', onResize);
+//     };
+//   }, []);
+//
+//   return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));
+// }
+// function getVisibleMonths(scale) {
+//   if (typeof window === 'undefined') {
+//     return 1;
+//   }
+//   let monthWidth = scale === 'large' ? 336 : 280;
+//   let gap = scale === 'large' ? 30 : 24;
+//   let popoverPadding = scale === 'large' ? 32 : 48;
+//   return Math.floor(
+//     (window.innerWidth - popoverPadding * 2) / (monthWidth + gap),
+//   );
+// }
 export function useFocusManagerRef(ref) {
     let domRef = useRef();
     useImperativeHandle(ref, () => ({

package/es/components/forms/FieldWrapper/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper/extract-field-wrapper-props.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/Field.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
@@ -72,7 +72,7 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
 }
 export function Field(props) {
     const allProps = useFormProps(props);
-    let { children, form, label, extra, necessityLabel, necessityIndicator, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = allProps;
+    let { children, form, label, extra, necessityLabel, necessityIndicator, description, tooltip, isHidden, isDisabled, isLoading, styles, labelProps, labelPosition = 'top', labelStyles, labelSuffix, } = allProps;
     if (typeof children === 'function') {
         children = children(form);
     }
@@ -84,8 +84,14 @@ export function Field(props) {
     const { validationState, message, isRequired, name, id } = __props;
     if (!child)
         return null;
+    if (id) {
+        if (!labelProps) {
+            labelProps = {};
+        }
+        labelProps.for = id;
+    }
     if (__props.nonInput) {
-        return (_jsx(LegacyFieldProvider, { children: _jsx(FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: __props.validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles, labelSuffix: labelSuffix }) }));
+        return (_jsx(LegacyFieldProvider, { children: _jsx(FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: __props.validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, labelProps: labelProps, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles, labelSuffix: labelSuffix }) }));
     }
     if (!form) {
         warn('Form Field requires declared form instance if field name is specified');

package/es/components/forms/Form/Form.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/Submit/Submit.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/Submit/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/SubmitError.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 

package/es/components/forms/Form/use-field/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.2
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */