@cube-dev/ui-kit 0.27.1 → 0.28.0

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

@@ -1,63 +1,67 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.1
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatSegments = exports.useFocusManagerRef = exports.useVisibleMonths = exports.useFormatHelpText = void 0;
+exports.formatSegments = exports.useFocusManagerRef = void 0;
 const utils_1 = require("@react-spectrum/utils");
 const focus_1 = require("@react-aria/focus");
-const i18n_1 = require("@react-aria/i18n");
-const datepicker_1 = require("@react-aria/datepicker");
 const react_1 = require("react");
-const utils_2 = require("@react-aria/utils");
-function useFormatHelpText(props) {
-    let formatter = (0, i18n_1.useDateFormatter)({ dateStyle: 'short' });
-    let displayNames = (0, datepicker_1.useDisplayNames)();
-    return (0, react_1.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]);
-}
-exports.useFormatHelpText = useFormatHelpText;
-function useVisibleMonths(maxVisibleMonths) {
-    let [visibleMonths, setVisibleMonths] = (0, react_1.useState)(getVisibleMonths('large'));
-    (0, utils_2.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));
-}
-exports.useVisibleMonths = useVisibleMonths;
-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 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),
+//   );
+// }
 function useFocusManagerRef(ref) {
     let domRef = (0, react_1.useRef)();
     (0, react_1.useImperativeHandle)(ref, () => ({

package/cjs/components/forms/FieldWrapper/FieldWrapper.js

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

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

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

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

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

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

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

package/cjs/components/forms/FileInput/FileInput.js

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.1
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
@@ -75,7 +75,7 @@ function getValueProps(type, value, onChange, allowsCustomValue) {
 }
 function Field(props) {
     const allProps = (0, Form_1.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);
     }
@@ -87,8 +87,14 @@ 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 ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, jsx_runtime_1.jsx)(FieldWrapper_1.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 ((0, jsx_runtime_1.jsx)(LegacyFieldProvider, { children: (0, jsx_runtime_1.jsx)(FieldWrapper_1.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) {
         (0, warnings_1.warn)('Form Field requires declared form instance if field name is specified');

package/cjs/components/forms/Form/Form.js

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

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

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

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

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

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

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

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

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

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

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

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

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

package/cjs/components/forms/Form/use-field/types.js

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

package/cjs/components/forms/Form/use-field/use-field-props.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.1
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
@@ -72,9 +72,7 @@ function useFieldProps(props, params = {}) {
         if (!result.labelProps) {
             result.labelProps = {};
         }
-        if (result.labelProps) {
-            result.labelProps.for = result.id;
-        }
+        result.labelProps.for = result.id;
     }
     if (process.env.NODE_ENV === 'development') {
         // eslint-disable-next-line react-hooks/rules-of-hooks

package/cjs/components/forms/Form/use-field/use-field.js

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

package/cjs/components/forms/Form/use-form.js

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

package/cjs/components/forms/Form/validation.js

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

package/cjs/components/forms/Input/Input.js

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

package/cjs/components/forms/Input/index.js

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

package/cjs/components/forms/Label.js

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

package/cjs/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.1
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
@@ -10,9 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const i18n_1 = require("@react-aria/i18n");
-const numberfield_1 = require("@react-stately/numberfield");
-const numberfield_2 = require("@react-aria/numberfield");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
 const Form_1 = require("../Form");
 const provider_1 = require("../../../provider");
 const TextInputBase_1 = require("../TextInput/TextInputBase");
@@ -39,11 +38,11 @@ function NumberInput(props, ref) {
     props = (0, Form_1.useFieldProps)(props);
     let { hideStepper, suffix, value, defaultValue, onChange, inputRef, ...otherProps } = props;
     let showStepper = !hideStepper;
-    let { locale } = (0, i18n_1.useLocale)();
-    let state = (0, numberfield_1.useNumberFieldState)({ ...props, locale });
+    let { locale } = (0, react_aria_1.useLocale)();
+    let state = (0, react_stately_1.useNumberFieldState)({ ...props, locale });
     let defaultInputRef = (0, react_1.useRef)(null);
     inputRef = inputRef || defaultInputRef;
-    let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = (0, numberfield_2.useNumberField)(props, state, inputRef);
+    let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = (0, react_aria_1.useNumberField)(props, state, inputRef);
     const steppers = showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size })] })) : undefined;
     return ((0, jsx_runtime_1.jsx)(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (props.suffixPosition === 'before' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, steppers] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [steppers, suffix] }))) : (suffix) }));
 }

package/cjs/components/forms/NumberInput/StepButton.js

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

package/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.1
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const textfield_1 = require("@react-aria/textfield");
+const react_aria_1 = require("react-aria");
 const icons_1 = require("@ant-design/icons");
 const TextInputBase_1 = require("../TextInput/TextInputBase");
 const provider_1 = require("../../../provider");
@@ -29,7 +29,7 @@ function PasswordInput(props, ref) {
     });
     let [type, setType] = (0, react_1.useState)('password');
     let inputRef = (0, react_1.useRef)(null);
-    let { labelProps, inputProps } = (0, textfield_1.useTextField)({
+    let { labelProps, inputProps } = (0, react_aria_1.useTextField)({
         ...props,
         type,
     }, inputRef);

package/cjs/components/forms/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.1
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
@@ -11,10 +11,9 @@ exports.RadioButton = exports.Radio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-spectrum/utils");
 const react_1 = require("react");
-const interactions_1 = require("@react-aria/interactions");
-const radio_1 = require("@react-aria/radio");
+const react_aria_1 = require("react-aria");
 const tasty_1 = require("../../../tasty");
-const interactions_2 = require("../../../utils/react/interactions");
+const interactions_1 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const provider_1 = require("../../../provider");
 const Label_1 = require("../Label");
@@ -153,11 +152,11 @@ function Radio(props, ref) {
     if (!state) {
         throw new Error('CubeUI: The Radio button is used outside the RadioGroup.');
     }
-    let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled }, true);
-    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
+    let { isFocused, focusProps } = (0, interactions_1.useFocus)({ isDisabled }, true);
+    let { hoverProps, isHovered } = (0, react_aria_1.useHover)({ isDisabled });
     let inputRef = (0, react_1.useRef)(null);
     let domRef = (0, utils_1.useFocusableRef)(ref, inputRef);
-    let { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected, } = (0, radio_1.useRadio)({
+    let { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected, } = (0, react_aria_1.useRadio)({
         name,
         ...props,
         isDisabled,

package/cjs/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.1
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
@@ -11,13 +11,14 @@ exports.RadioGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("@react-spectrum/utils");
-const radio_1 = require("@react-aria/radio");
-const radio_2 = require("@react-stately/radio");
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
 const provider_1 = require("../../../provider");
 const Form_1 = require("../Form");
 const tasty_1 = require("../../../tasty");
-const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
+const react_2 = require("../../../utils/react");
+const wrapper_1 = require("../wrapper");
 const context_1 = require("./context");
 const RadioGroupElement = (0, tasty_1.tasty)({
     qa: 'RadioGroup',
@@ -42,15 +43,15 @@ function RadioGroup(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
     props = (0, Form_1.useFieldProps)(props, { defaultValidationTrigger: 'onChange' });
-    let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation, message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, labelSuffix, isSolid, ...otherProps } = props;
+    let { isDisabled, isRequired, labelPosition = 'top', validationState, children, orientation, styles, groupStyles, insideForm, labelProps: baseLabelProps, isSolid, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
     styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, groupStyles);
-    let state = (0, radio_2.useRadioGroupState)(props);
+    let state = (0, react_stately_1.useRadioGroupState)(props);
     if (orientation == null) {
         orientation = isSolid ? 'horizontal' : 'vertical';
     }
-    let { radioGroupProps: fieldProps, labelProps } = (0, radio_1.useRadioGroup)(props, state);
+    let { radioGroupProps: fieldProps, labelProps } = (0, react_aria_1.useRadioGroup)(props, state);
     let radioGroup = ((0, jsx_runtime_1.jsx)(RadioGroupElement, { styles: groupStyles, mods: {
             horizontal: orientation === 'horizontal',
             'inside-form': insideForm,
@@ -61,28 +62,13 @@ function RadioGroup(props, ref) {
                 validationState,
                 isDisabled,
             }, children: (0, jsx_runtime_1.jsx)(context_1.RadioContext.Provider, { value: { state, name: props.name, isSolid }, children: children }) }) }));
-    return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
-            labelPosition,
-            label,
-            extra,
-            styles,
-            isRequired,
-            labelStyles,
-            necessityIndicator,
-            labelProps,
-            fieldProps,
-            isDisabled,
-            validationState,
-            message,
-            description,
-            requiredMark,
-            tooltip,
-            isHidden,
-            orientation,
-            Component: radioGroup,
-            ref: domRef,
-            labelSuffix,
-        } }));
+    return (0, wrapper_1.wrapWithField)(radioGroup, domRef, {
+        ...props,
+        children: null,
+        fieldProps,
+        labelProps: (0, react_2.mergeProps)(baseLabelProps, labelProps),
+        styles,
+    });
 }
 /**
  * Radio groups allow users to select a single option from a list of mutually exclusive options.

package/cjs/components/forms/RadioGroup/context.js

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

package/cjs/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.27.1
+ * @cube-dev/ui-kit v0.28.0
  * Released under the MIT license.
  */
 
@@ -11,8 +11,8 @@ exports.SearchInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("@ant-design/icons");
-const searchfield_1 = require("@react-stately/searchfield");
-const searchfield_2 = require("@react-aria/searchfield");
+const react_stately_1 = require("react-stately");
+const react_aria_1 = require("react-aria");
 const TextInputBase_1 = require("../TextInput/TextInputBase");
 const provider_1 = require("../../../provider");
 const actions_1 = require("../../actions");
@@ -33,8 +33,8 @@ exports.SearchInput = (0, react_1.forwardRef)(function SearchInput(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     let { isClearable, validationState } = props;
     let inputRef = (0, react_1.useRef)(null);
-    let state = (0, searchfield_1.useSearchFieldState)(props);
-    let { inputProps, clearButtonProps } = (0, searchfield_2.useSearchField)(props, state, inputRef);
+    let state = (0, react_stately_1.useSearchFieldState)(props);
+    let { inputProps, clearButtonProps } = (0, react_aria_1.useSearchField)(props, state, inputRef);
     let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
     return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.suffix, showClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) }))] })) : undefined }));
 });

package/cjs/components/forms/Slider/Gradation.js

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

package/cjs/components/forms/Slider/Header.js

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

package/cjs/components/forms/Slider/RangeSlider.js

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

package/cjs/components/forms/Slider/Slider.js

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