@cube-dev/ui-kit 0.59.13 → 0.60.0

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.13
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ const TagElement = tasty({
     styles: {
         position: 'relative',
         display: 'inline-flex',
-        gap: '1x',
+        gap: '.5x',
         placeContent: 'center start',
         placeItems: 'center start',
         radius: '1r',
@@ -28,8 +28,8 @@ const TagElement = tasty({
         textAlign: 'left',
         whiteSpace: 'nowrap',
         padding: {
-            '': '0 (1x - 1bw)',
-            closable: '0 (2.5x - 1bw) 0 (1x - 1bw)',
+            '': '0 (.75x - 1bw)',
+            closable: '0 (2.5x - 1bw) 0 (.75x - 1bw)',
         },
         fill: {
             '': '#dark.04',
@@ -52,9 +52,6 @@ const TagElement = tasty({
                 return map;
             }, {}),
         },
-        Icon: {
-            fontSize: '@icon-size',
-        },
         Content: {
             display: 'block',
             width: 'max 100%',
@@ -82,7 +79,7 @@ const CloseAction = tasty(Action, {
 function Tag(allProps, ref) {
     let { type, theme, icon, isClosable, onClose, closeButtonStyles, children, mods, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-type": theme ?? type, mods: { ...mods, closable: isClosable }, children: [icon ? _jsx("div", { "data-element": "TagIcon", children: icon }) : null, _jsx("div", { "data-element": "Content", children: children }), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseIcon, { size: 12 }) }) })) : undefined] }));
+    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-type": theme ?? type, mods: { ...mods, closable: isClosable }, children: [icon, _jsx("div", { "data-element": "Content", children: children }), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseIcon, { size: 12 }) }) })) : undefined] }));
 }
 const _Tag = forwardRef(Tag);
 _Tag.displayName = 'Tag';

package/es/components/content/Text.js

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

package/es/components/content/Title.js

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

package/es/components/fields/Checkbox/Checkbox.js

@@ -1,15 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.13
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFocusableRef } from '@react-spectrum/utils';
+import { IconCheck, IconMinus } from '@tabler/icons-react';
 import { forwardRef, useContext, useMemo, useRef } from 'react';
 import { useCheckbox, useCheckboxGroupItem, useHover, } from 'react-aria';
 import { useToggleState } from 'react-stately';
+import { Icon } from '../../../icons/index';
 import { useProviderProps } from '../../../provider';
 import { CONTAINER_STYLES, Element, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
@@ -20,12 +22,6 @@ import { INLINE_LABEL_STYLES, LABEL_STYLES, useFieldProps, useFormProps, wrapWit
 import { HiddenInput } from '../../HiddenInput';
 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: "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',
     qa: 'CheckboxWrapper',
@@ -52,7 +48,7 @@ const CheckboxElement = tasty({
             '': '#white',
             'checked | indeterminate': '#purple-text',
             'invalid & !checked': '#white',
-            'invalid & checked': '#danger-text',
+            'invalid & checked': '#danger',
             disabled: '#dark.12',
         },
         color: {
@@ -61,7 +57,7 @@ const CheckboxElement = tasty({
         },
         border: {
             '': '#dark.30',
-            invalid: '#danger-text.50',
+            invalid: '#danger',
             'disabled | ((indeterminate | checked) & !invalid)': '#clear',
         },
         width: '(2x - 2bw)',
@@ -119,7 +115,7 @@ function Checkbox(props, ref) {
                 ? { 'aria-label': label }
                 : {}),
         }, toggleState, inputRef);
-    let markIcon = isIndeterminate ? _jsx(IndeterminateOutline, {}) : _jsx(CheckOutlined, {});
+    let markIcon = isIndeterminate ? (_jsx(Icon, { size: 12, stroke: 3, children: _jsx(IconMinus, {}) })) : (_jsx(Icon, { size: 12, stroke: 3, children: _jsx(IconCheck, {}) }));
     if (groupState) {
         for (let key of ['isSelected', 'defaultSelected', 'isEmphasized']) {
             if (originalProps[key] != null) {

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

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

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

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

package/es/components/fields/Checkbox/index.js

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

package/es/components/fields/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.13
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
@@ -10,9 +10,9 @@ import { cloneElement, forwardRef, useEffect, useMemo, } from 'react';
 import { useButton, useComboBox, useFilter, useHover, useOverlayPosition, } from 'react-aria';
 import { Item, useComboBoxState } from 'react-stately';
 import { useEvent } from '../../../_internal/index';
-import { LoadingIcon } from '../../../icons';
+import { DownIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
-import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { mergeProps, modAttrs, useCombinedRefs, useLayoutEffect, } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
@@ -21,9 +21,6 @@ import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from '../index';
 import { ListBoxPopup } from '../Select';
-function CaretDownIcon() {
-    return (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }) }));
-}
 const ComboBoxWrapperElement = tasty({
     styles: INPUT_WRAPPER_STYLES,
 });
@@ -33,13 +30,17 @@ const InputElement = tasty({
 });
 const TriggerElement = tasty({
     as: 'button',
+    type: 'neutral',
     styles: {
         display: 'grid',
         placeItems: 'center',
         placeContent: 'center',
         placeSelf: 'stretch',
         radius: '(1r - 1bw) right',
-        width: '4x',
+        width: {
+            '': '4x',
+            '[data-size="small"]': '3x',
+        },
         color: {
             '': '#dark-02',
             hovered: '#dark-02',
@@ -58,6 +59,7 @@ const TriggerElement = tasty({
         cursor: 'pointer',
     },
 });
+const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
 export const ComboBox = forwardRef(function ComboBox(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
@@ -81,7 +83,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
             };
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, suffix, listBoxStyles, overlayStyles, hideTrigger, message, description, size, autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, ...otherProps } = props;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size, autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, ...otherProps } = props;
     let isAsync = loadingState != null;
     let { contains } = useFilter({ sensitivity: 'base' });
     let state = useComboBoxState({
@@ -91,8 +93,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         allowsEmptyCollection: isAsync,
         menuTrigger,
     });
-    const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
-    inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
+    styles = extractStyles(otherProps, PROP_STYLES, styles);
     ref = useCombinedRefs(ref);
     wrapperRef = useCombinedRefs(wrapperRef);
     inputRef = useCombinedRefs(inputRef);
@@ -215,7 +216,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         };
     }, []);
     let allInputProps = useMemo(() => mergeProps(inputProps, hoverProps, focusProps), [inputProps, hoverProps, focusProps]);
-    let comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'ComboBox', ...modAttrs(mods), styles: outerStyles, style: {
+    let comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'ComboBox', ...modAttrs(mods), styles: wrapperStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
         }, "data-size": size, children: [_jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, ...modAttrs(mods), "data-size": size }), prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, !hideTrigger ? (_jsx(TriggerElement, { qa: "ComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ...modAttrs({
                             pressed: isTriggerPressed,
@@ -223,7 +224,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
                             hovered: isTriggerHovered,
                             disabled: isDisabled,
                             loading: isLoading,
-                        }), ref: triggerRef, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: _jsx(CaretDownIcon, {}) })) : null] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }) })] }));
+                        }), ref: triggerRef, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: _jsx(DownIcon, {}) })) : null] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }) })] }));
     return wrapWithField(comboBoxField, ref, mergeProps({ ...props, styles }, { labelProps }));
 });
 ComboBox.Item = Item;

package/es/components/fields/ComboBox/index.js

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

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

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

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

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

package/es/components/fields/DatePicker/DatePicker.js

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

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

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

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

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

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

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

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

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

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

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

package/es/components/fields/DatePicker/DateRangeSeparatedPicker.js

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

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

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

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

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

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

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

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

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

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

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

package/es/components/fields/DatePicker/types.js

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

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

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

package/es/components/fields/FileInput/FileInput.js

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

package/es/components/fields/Input/Input.js

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

package/es/components/fields/Input/index.js

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

package/es/components/fields/NumberInput/NumberInput.js

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

package/es/components/fields/NumberInput/StepButton.js

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

package/es/components/fields/PasswordInput/PasswordInput.js

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

package/es/components/fields/RadioGroup/Radio.js

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

package/es/components/fields/RadioGroup/RadioGroup.js

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

package/es/components/fields/RadioGroup/context.js

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

package/es/components/fields/RadioGroup/index.js

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

package/es/components/fields/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.59.13
+ * @cube-dev/ui-kit v0.60.0
  * Released under the MIT license.
  */
 
@@ -21,7 +21,10 @@ const ClearButton = tasty(Button, {
     icon: _jsx(CloseIcon, {}),
     styles: {
         radius: 'right (1r - 1bw)',
-        width: '4x',
+        width: {
+            '': '4x',
+            '[data-size="small"]': '3x',
+        },
         height: 'auto',
         placeSelf: 'stretch',
     },
@@ -34,7 +37,7 @@ export const SearchInput = forwardRef(function SearchInput(props, ref) {
     let state = useSearchFieldState(props);
     let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
     let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
-    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchIcon, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) }))] })) : undefined }));
+    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchIcon, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ClearButton, { size: props.size, type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) }))] })) : undefined }));
 });
 
         

package/es/components/fields/SearchInput/index.js

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